canvas让web具有绘图能力，webGL让canvas具有3D渲染能力。webGL是大部分浏览器直接支持的一种3D绘图标准。pixi.js、three.js在它的基础上进行了进一步的封装来简化开发过程。 PIXI.js

canvas.getContext("webgl");

webGL2.0实现：

通过html脚本本身实现web交互式三维动画制作，无需任何特定浏览器插件
利用底层图形硬件的加速功能实现3D渲染，效率高
实现的标准按照统一、标准、跨平台的openGL SE接口

Canvas

~~flash~~ canvas元素是HTML5最受欢迎的特性

canvas就是画布，只要浏览器支持，可以在canvas上获取2D上下文和3D上下文，进行基于JavaScript的2D绘图和基于WebGL的3D绘图。
canvas元素占据一块页面区域，本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成，可以动态在上面绘制图形，引入图片、加入高级动画。
坐标：（0，0）网页左上角

<body>
    <canvas id="canvas">

    </canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");//返回一个用来绘制环境类型的CanvasRenderingContext2D对象
        context.fillStyle="#FF0000";
        context.fillRect(0,0,150,75);
        for(const prop in context){
            console.log(prop);
        }
    </script>
</body>

命令式的绘制

scale、translate、rotate方法变换图形
drawImage来绘制图片
getImageData(x,y,w,h)函数获取canvas上的像素数据，然后putImageData()粘贴。
图像平铺，当图像有重合的时候也有相关图像混合技术globaCompositeOperation

保存

save图形上下文进栈、restore出栈
也可以通过toDataURL将当前绘画状态输出到一个dataURL

base64编码的URL，目前大多数浏览器都支持，利用这个URL来保存将在网页中嵌入的小型数据

WebGL

WEB版的OpenGL，WebGL是一个光栅化引擎，运行在电脑的GPU中，可以根据代码绘制出点，线和三角形，通过组合使用点，线和三角形代替实现更复杂任务。

代码需要提供成对的方法：

着色程序=顶点着色器(计算顶点的位置)+片段着色器(计算出当前绘制图元中每个像素的颜色值)

WebGL在GPU上的工作基本上分为:

顶点着色器:将顶点（或数据流）转换到裁剪空间坐标
片断着色器:计算图元的颜色值
基于裁剪空间坐标的结果绘制像素点

库

glMatrix 创建高性能WebGL应用的JavaScript矩阵矢量库。
PhiloGL 一个用于数据可视化、创意编程和游戏开发的WebGL库。
Pixi.js是一种快速的开源2D WebGL渲染器。
PlayCanvas是一个开源游戏引擎。
Sylvester是一个用于处理向量和矩阵的开源库。尚未针对WebGL进行优化，但功能极其强大。
three.js是一个开源的，功能齐全的3D WebGL库。
Phaser是一个适用于Canvas和WebGL的浏览器游戏的快速，免费和有趣的开源框架。
RedGL 是一个开源3D WebGL库。
vtk.js 是一个JavaScript库，用于在浏览器中进行科学可视化。

基础知识

位图：（光栅图像）由很多像素【单色方格】组成矢量图：基于数学公式，由光滑的线和填充区域组成

HTML支持2D、3D绘图

Canvas

WebGL

库

基础知识