第十五章 使用canvas绘图
1、要使用<canvas>元素，必须先设置其width和height属性。
2、要在这块画布上绘图，需要先取得绘图上下文，取得绘图上下文对象的引用，需要调用getContext（）方法并传入上下文的名字，如2d。使用前先对getContext进行能力检测。
3、使用toDataURL（）方法可以导出绘制的图像。
4、2D上下文。2D上下文的坐标开始于左上角，左上角为（0，0）。
1、填充和描边。两个属性：fillStyle和strokeStyle。
2、绘制矩形。唯一一种可以直接在2d上下文中绘制的形状。与之有关的方法：fillRect（）/strokeRect（）/clearRect（）。接受四个参数：x/y/宽/高。描边线条宽度由lineWidth控制，线条末端形状由lineCap控制，线条相交形状由lineJoin控制。
3、绘制路径。
4、文本。textAlign和textBaseline中的值的含义：【给定的点】是文本的【值】。比如textAlign中的start，表示给定的点是文本的start，所以看起来文字靠右。textBaseline中值为top时，表示给定的点是文本的top线，所以文字是靠下的。measureText（）方法用于辅助确定文本的大小。
var fontSize=100;
context.font=fontSize+"px Arial"; while (context.measureText("Hello World!").width>140) {
fontSize--;
context.font=fontSize+"px Arial";
}5、变换。save（）方法保存设置和变换，restore（）方法调用。先进后出。
6、绘制图像。drawImage（）方法。
7、阴影。
8、渐变。渐变的坐标要与绘制的图形坐标相匹配。线性渐变/放射渐变。
9、模式。模式其实就是重复的图像，可以用来填充或描边图形。调用createPattern（）方法创建一个新模式。注意：将填充样式设置为模式对象，指标是在填充区域内显示图像，而不是从填充位置开始绘制图像。图像是从原点开始的。
10、使用图像数据。通过getImageData（）取得原始图像数据，返回的对象是ImageData的实例，有三个属性：width/height/data。data是个数组，保存每个像素的rgba。可利用data使图像彩色变黑白。
11、合成。会应用到所有绘制操作的属性：globalAlpha和globalCompositionOperation。前者设置全局透明度，后者表示后绘制的图形与已绘制图形的结合方法。