js-JavaScript高级程序设计学习笔记12

第十五章 使用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。前者设置全局透明度，后者表示后绘制的图形与已绘制图形的结合方法。