1 webGL学习地址：

2 基本用法

元素，必须先设置width和height属性。
标签中的信息是后备信息，如果浏览器不支持就会显示这些信息。
示例：

3 getContext()

调用getContext()方法获取绘图对象；

4 2D上下文

5 填充和描边

原点坐标（0,0）左上角（x,y）。X值越大越靠右，y值越大越靠下。
2D上下文两种基本绘图操作：填充和描边。
填充：就是用指定的样式（颜色、渐变或图像）填充图形；
描边：就是只在图形的边缘画线。
大多数2d上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性：fillStyle和strokeStyle。
css中指定颜色值的任何格式，包括颜色名、十六进制码、rgb、rgba、hsl或hsla。

6 绘制矩形

矩形是唯一 一种可以直接在2D上下文中绘制的形状。与矩形有关的方法：fillRect()、strokeRect()、clearRect()。这三个方法都接收4个参数：矩形的X坐标、矩形的y坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

7 fillRect()

书中例子：

8 strokeRect()

9 clearRect()

10 绘制路径

示例代码：

11 绘制文本

代码：

代码2：

12 变化

13 绘制图像

14 阴影

示例代码：

15 渐变

16 线性渐变

canvas元素.createLinearGradient();
4个参数：起点的X坐标、起点的Y坐标、终点的X坐标、终点的Y坐标。
创建渐变对象后，使用addColorStop（）方法指定色标。

17 径向渐变

canvas元素.createRadialGradient();
6个参数对应着两个圆的圆心和半径：前三个参数指定的是起点圆的原心（x和y）及半径，后三个参数值定的是终点圆的原心（x和y）及半径。

参考代码：

18 模式，重复图像

createPattern()方法2个参数：一个HTML元素和一个表示如何重复图像的字符串。其中，第二个参数的值与CSS的background-repeat属性值相同，包括“repeat”、repeat-x、repeat-y、no-repeat。

19 使用图像数据

代码：

20 合成

例子：

21 WEBGL（canvas3D）

22 类型化数组

未学习完WEBGL