canvas基础知识总结
-
canvas兼容性（主要针对IE）：IE9以上
-
canvas默认宽高是300px * 150px
-
基本绘画：canvas.getContext(‘2d’)
-
canvas画矩形：
（1）fillRect(x, y, width, height) :x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸，该方法是绘制一个填充的矩形（2）strokeRect(x, y, width, height)，该方法是绘制一个黑色边框矩形
（3）clearRect(x, y, width, height)，该方法清除指定矩形区域，让清除部分完全透明。
（4） rect(x, y, width, height) ： 绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
-
canvas线stroke绘制：
(1) beginPath() : 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。(2) moveTo(x, y) : 当canvas初始化或者beginPath()调用后，通常会使用moveTo()函数设置起点
(3) lineTo(x, y) : 绘制一条从当前起始位置到指定x以及y位置的直线，x以及y ，代表坐标系中直线结束的点；起始点和之前的绘制路径有关，之前路径的结束点就是接下来的起始点，起始点也可以通过moveTo()函数改变。
（4）closePath() ： 闭合路径之后图形绘制命令又重新指向到上下文中。闭合路径closePath()不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
（5）stroke() ： 通过线条来绘制图形轮廓。
（6）fill() ： 通过填充路径的内容区域生成实心的图形。调用fill()函数时，所有没有闭合的形状都会自动闭合，所以不需要调用closePath()函数。但是调用stroke()时不会自动闭合
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 填充三角形
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill(); //填充自动给闭合，不需要closePath()
// 描边三角形
ctx.beginPath(); //重新开始画线
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath(); //画线需要闭合，如果没有添加闭合路径closePath()，则只绘制了两条线段
ctx.stroke(); //画线轮廓
-
绘制圆弧或者圆，使用arc()方法
（1）arc(x, y, radius, startAngle, endAngle, anticlockwise) ：
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。 -
二次贝塞尔曲线及三次贝塞尔曲线
（1）quadraticCurveTo(cp1x, cp1y, x, y) ： cp1x,cp1y为一个控制点，x,y为结束点。（2） bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) ： cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。 参数x、y在这两个方法中都是结束点坐标。cp1x,cp1y为坐标中的第一个控制点，cp2x,cp2y为坐标中的第二个控制点。
-
fillStyle 和 strokeStyle，默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）
（1）fillStyle = color ： 设置图形的填充颜色。（2）strokeStyle = color ：设置图形轮廓的颜色。
9.阴影 Shadows
（1）shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
（2）shadowOffsetY = float
（3）shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
（4）shadowColor = color
shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
10.绘制文本
（1）fillText(text, x, y [, maxWidth]) ： 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
（2）strokeText(text, x, y [, maxWidth]) ： 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
11.文本样式
(1) font = value : 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
(2) textAlign = value : 文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
(3) textBaseline = value : 基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
(4) direction = value : 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
(5) measureText() : 将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。
-
store和restore
(1) save() : 保存画布(canvas)的所有状态(2) restore() : save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。一旦我们调用 restore，状态栈中最后的状态会弹出，并恢复所有设置。如果不是之前用 save 保存了状态，那么我们就需要手动改变设置来回到前一个状态，这个对于两三个属性的时候还是适用的，一旦多了，我们的代码将会猛涨。
13.移动 translate
translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量。
在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(30，40);
ctx.fillRect(0, 0, 25, 25); //这里的0，0是相对于translate移动完之后的位置，可以不用手动输入修改位置
ctx.restore();
- 旋转 Rotating
（1）rotate(angle) ： 这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法。
15.缩放 Scaling
（1）scale(x, y) ： scale 方法可以缩放画布的水平和垂直的单位。两个参数都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比1小，会比缩放图形， 如果比1大会放大图形。
默认值为1， 为实际大小。画布初始情况下， 是以左上角坐标为原点的第一象限。如果参数为负实数， 相当于以x 或 y轴作为对称轴镜像反转。
默认情况下，canvas 的 1 个单位为 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。
16.变形 Transforms
(1) transform(m11, m12, m21, m22, dx, dy) : 这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵,这个函数的参数各自代表如下：
m11：水平方向的缩放
m12：水平方向的倾斜偏移
m21：竖直方向的倾斜偏移
m22：竖直方向的缩放
dx：水平方向的移动
dy：竖直方向的移动
（2）setTransform(m11, m12, m21, m22, dx, dy) ： 这个方法会将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。从根本上来说，该方法是取消了当前变形,然后设置为指定的变形,一步完成。
（3） resetTransform() ：重置当前变形为单位矩阵，
它和调用以下语句是一样的：ctx.setTransform(1, 0, 0, 1, 0, 0);
