canvas
1、Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。
一个Canvas定义了一个指定尺寸的矩形框，在这个范围内我们可以随意绘制：
<canvas id="test-canvas" width="500" height="500"></canvas>
2、在使用Canvas前，用canvas.getContext来测试浏览器是否支持Canvas
var canvas = document.getElementById('test-canvas');
if (canvas.getContext) {
alert('你的浏览器支持Canvas!');
} else {
alert('你的浏览器不支持Canvas!');
}
3、getContext('2d')方法让我们拿到一个CanvasRenderingContext2D对象，所有的绘图操作都需要通过这个对象完成。
var context = canvas.getContext('2d');
4、canvas坐标：在绘制前，我们需要先了解一下Canvas的坐标系统：
Canvas的坐标以左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数。
5、绘制矩形：1、fillRect() 实心矩形
2、strokeRect() 边框矩形
3、clearRect() 清除矩形
这三个方法都能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。 fillRect()方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过 fillStyle 属性指定，strokeRect()通过strokeStyle属性指定。
context.fillStyle = 'red'; context.fillRect(0, 0, 50, 50); context.strokeStyle = 'saddlebrown'; context.strokeRect(25, 25, 50, 50); context.clearRect(30, 30, 10, 10);
6、绘制路径：1、arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)为圆心绘制一条弧线，弧线半径为 radius，起始和结束角度（用弧度表示）分别为 startAngle 和endAngle。最后一个参数表示 startAngle 和 endAngle 是否按逆时针方向计算，值为 false表示按顺时针方向计算。
2、lineTo(x, y)：从上一点开始绘制一条直线，到(x,y)为止。
3、moveTo(x, y)：将绘图游标移动到(x,y)，不画线。
context.beginPath() context.arc(105, 105, 25, 0, Math.PI * 2, false); context.moveTo(105, 107); context.arc(105, 105, 2, 0, Math.PI * 2, false); context.moveTo(110, 120); context.arc(105, 120, 5, 0, Math.PI, false); context.moveTo(90, 95); context.lineTo(100, 95); context.moveTo(110, 95); context.lineTo(120, 95); context.stroke();
7、变换：1、 rotate(angle)：围绕原点旋转图像 angle 弧度。
2、scale(scaleX, scaleY)：缩放图像
3、translate(x, y)：将坐标原点移动到(x,y) 执行这个变换之后， 坐标(0,0)会变成之前由(x,y)表示的点。
context.translate(165, 130); context.beginPath(); // context.rotate(1); // context.scale(2,2); context.moveTo(0, 0); context.lineTo(0, 50); context.strokeStyle = 'cornflowerblue'; context.stroke();
8、save()可以把更多设置保存到栈结构中，之后再连续调用 restore()则可以一级一级返回
context.translate(45, 60); context.fillStyle = 'red'; context.fillRect(10, 10, 50, 50); context.save(); context.fillStyle = 'yellow'; context.fillRect(80, 10, 50, 50); context.save(); context.fillStyle = 'coral'; context.fillRect(150, 10, 50, 50); context.restore(); context.fillRect(10, 80, 50, 50); context.restore(); context.fillRect(80, 80, 50, 50);
9、阴影：1、shadowColor：用 CSS 颜色格式表示的阴影颜色，默认为黑色。
2、shadowOffsetX：形状或路径 x 轴方向的阴影偏移量，默认为 0。
3、shadowOffsetY：形状或路径 y 轴方向的阴影偏移量，默认为 0。
4、shadowBlur：模糊的像素数，默认 0，即不模糊。
context.shadowBlur = 4; context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowColor = 'rgba(0,0,0,0.5)'; context.fillRect(150, 80, 50, 50);
10、绘制图像：drawImage()
context.translate(-200, 150);
window.onload = function() {
var img = document.images[0];
context.drawImage(img, 0, 0);
context.drawImage(img, 100, 0, 30, 30);
context.drawImage(img, 40, 0, 89, 84, 110, 40, 50, 50);
//要绘制的图像、源图像的 x 坐标、源图像的 y 坐标、源图像的宽度、源图像的高度、目标图像的 x 坐标、目标图像的 y 坐标、目标图像的宽度、目标图像的高度。
}
11、渐变：调用 createLinearGradient()方法 。这个方法接收 4 个参数：起点的 x 坐标、起点的 y 坐 标、终点的 x 坐标、终点的 y 坐标。 调用这个方法后，它就会创建一个指定大小的渐变
var gradient=context.createLinearGradient(0,0,100,100);
创建了渐变对象后，下一步就是使用 addColorStop()方法来指定色标。 这个方法接收两个参数：色标位置和 CSS 颜色值
gradient.addColorStop(0,'#98FB98');
gradient.addColorStop(1,'pink');
context.fillStyle=gradient;
context.fillRect(0,0,100,100);
12、模式：调用createPattern()方法并传入两个参数：一个 HTML <img>元素和一个表示如何重复图像的字符串。
pattern = context.createPattern(img, "repeat"); context.fillStyle = pattern; context.fillRect(100, 100, 150, 150);
