XML与WEB Service技术(微软)：第05章 Canvas

1、第5章 Canvas08 七月 20222Ch5 Canvas5.1 Canvas基础5.2 基本形状的绘制5.3 颜色和样式5.4 阴影和文字绘制5.5 像素级绘图5.6 绘图状态与矩阵变换08 七月 202235.1 Canvas基础5.1.1 HTML5的canvas标记5.1.2 路径（beginPath、closePath、stroke、fill） 5.1.3 移动坐标（moveTo） 5.1.1 HTML5的canvas标记1创建画布:用canvas标记在网页上绘制图形和图像，首先需要在页面中添加一个canvas元素作为画布，并规定元素的id、宽度和高度。 2绘制图形:绘制工作必须

2、通过Canvas提供的API来完成。 Canvas原生支持的基本图形只有一种矩形，至于其他的像圆形、多边形等图形则全部由路径来负责绘制。var canvas = document.getElementById(myCanvas);var ctx = canvas.getContext(2d);08 七月 202245.1.2 路径（beginPath、closePath、stroke、fill）方 法说 明context.beginPath()清除包含的所有子路径，还原到默认的空状态context.fill()用当前的填充样式填充路径context.stroke()用当前的轮廓样式绘制路径轮廓

3、context.scrollPathIntoView()滚动当前路径到可视区域，对于手机等小屏幕的设备来说，该方法非常有用context.clip()创建剪切区域，即将绘制范围限制到剪切区域内context.isPointInPath(x, y)判断某个点是否在当前路径内（true或者false）08 七月 202255.1.3 移动坐标（moveTo）可以把Canvas API提供的moveTo方法想象成是把笔提起，并从一个点移动到另一个点的过程。当初始化canvas元素对象或者调用beginPath的时候，起始坐标默认在原点(0,0)处。大多数情况下，我们都需要调用moveTo方法将当前坐

4、标移到其他地方，特别是用于绘制不连续的路径时，此方法非常有用。08 七月 202265.2 基本形状的绘制5.2.1 直线（lineTo）5.2.2 矩形（fillRect、strokeRect、clearRect）5.2.3 圆形和弧形（arc）5.2.4 用贝塞尔曲线绘制图形（quadraticCurveTo）5.2.1 直线（lineTo）1用lineTo绘制直线2指定线型（lineWidth、lineCap、lineJoin、miterLimit）（1）线宽（2）线帽（3）线段连接（4）尖角限制08 七月 202285.2.2 矩形（fillRect、strokeRect、clearR

5、ect）1clearRect(x, y, width, height)2fillRect(x, y, width, height)3strokeRect(x, y, width, height)08 七月 202295.2.3 圆形和弧形（arc）首先调用context对象的beginPath方法创建路径，然后依次将绘制的对象添加到路径中，最后调用context的closePath方法关闭路径或者调用fill方法填充路径。1arc(x, y, radius, startAngle, endAngle, anticlockwise)2arcTo(x1, y1, x2, y2, radius)08

6、 七月 2022105.2.4 用贝塞尔曲线绘制图形（quadraticCurveTo）贝塞尔曲线可以是二次方和三次方的形式，一般用于绘制复杂而有规律的形状。二次贝塞尔曲线和三次贝塞尔曲线都有一个起点和一个终点，但二次贝塞尔曲线只有一个控制点，而三次贝塞尔曲线有两个控制点。1quadraticCurveTo(cx, cy, x, y)2bezierCurveTo(c1x, c1y, c2x, c2y, x, y)08 七月 202211 5.3 颜色和样式5.3.1 填充样式和轮廓样式（fillStyle、strokeStyle）5.3.2 透明度（Transparency）5.3.3 渐变（

7、Gradients）5.3.4 图案（Patterns）08 七月 2022125.3.1 填充样式和轮廓样式（fillStyle、strokeStyle）canvas元素对象的fill方法用于填充某个区域，填充颜色由fillStyle属性决定。stroke方法用于绘制轮廓，轮廓颜色由trokeStyle属性决定， 颜色既可以是CSS颜色值的字符串，也可以是渐变对象或者图案对象。默认为黑色。注意，一旦设置了fillStyle或者strokeStyle的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形绘制不同的颜色，只需要重新设置fillStyle或strokeStyle的值即可。

8、08 七月 2022135.3.2 透明度（Transparency）通过设置上下文对象的globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式。globalAlpha属性影响到canvas元素内所有图形的透明度，在需要绘制大量拥有相同透明度的图形时，这个属性相当高效。其有效值的范围是0.0（完全透明）到1.0（完全不透明），默认值是1.0。不过，一般情况下，由于strokeStyle和fillStyle属性接受符合CSS3规范的颜色值，所以使用CSS3的rgba()来分别设置具有透明度的填充颜色和轮廓颜色的情况比较多，也具有更好的可操作性和使用弹性。08 七月 2022145.

9、3.3 渐变（Gradients）下面的方法新建一个canvasGradient对象，并且赋给图形的fillStyle或strokeStyle属性。createLinearGradient(x1,y1,x2,y2)createRadialGradient(x1,y1,r1,x2,y2,r2)创建出canvasGradient对象后，就可以用addColorStop方法给它添加颜色了。addColorStop(position, color)在实际的项目开发中，可以根据需要添加任意多个色标（color stops），而且strokeStyle和fillStyle属性都可以通过设置渐变样式后再进行

10、绘制来实现渐变效果。08 七月 2022155.3.4 图案（Patterns）而Canvas API提供了一个更简单的方法来实现图案的各种功能。基本格式为：createPattern(image,type)第1个参数image可以是一个Image对象的引用，也可以是另一个canvas对象。第2个参数type必须是下面的字符串值之一：repeat、repeat-x、repeat-y和no-repeat。图案的应用与渐变类似，通过createPattern方法创建出一个pattern对象之后，将其赋给fillStyle或strokeStyle属性即可。注意，必须确保Image对象已经加载完毕才可

11、以调用createPattern方法，否则显示的效果可能不正确。使用Image对象的onload事件可以确保设置图案之前图像已经加载完毕。08 七月 2022165.4 阴影和文字绘制5.4.1 阴影（Shadow）5.4.2 字符文本的绘制08 七月 2022175.4.1 阴影（Shadow）在Canvas技术中，对阴影的支持有4个属性。分别是shadowOffsetX 、shadowOffsetY、shadowBlur和shadowColor。shadowOffsetX属性和shadowOffsetY属性用来设定阴影在X和Y轴的延伸距离，这两个属性不受变换矩阵的影响。负值表示阴影会向上或

12、向左延伸，正值则表示会向下或向右延伸，默认值都是0。shadowBlur用于设定阴影的模糊程度，其值也不受变换矩阵的影响，默认值为0。shadowColor用于设定阴影效果，可以是标准的CSS颜色值，默认是全透明的黑色。08 七月 2022185.4.2 字符文本的绘制1fillText(text，x, y, maxWidth)strokeText(text,x,y,maxWidth)3measureText (text)4相关属性font属性：设置文字字体textAlign属性：设置文字水平对齐方式，属性值可以是start、end、left、right、center。默认值是start。te

13、xtBaseline属性：设置文字垂直对齐方式，属性值可以是top、hanging、middle、alphabetic、ideographic、bottom。默认值为alphabetic， 正是由于默认值为alphabetic，导致在浏览器中只能看到文字的很小一部分。08 七月 2022195.5 像素级绘图canvas元素的渲染上下文API提供了createImageData、getImageData和putImageData三种方法针对像素进行操作，所基于的对象都是imageData对象。imageData对象包含width、height和data三个属性，其中data包含了width h

14、eight 4个字节，之所以乘以4，是因为每个像素都需要保存R、G、B值和透明度alpha。5.5.1 导入和绘制图像5.5.2 切片（Slicing）5.5.3 剪切（clip）和蒙版（mask）08 七月 2022205.5.1 导入和绘制图像第1步是设置图像来源通过document.getElementById方法来获取页面内的某个图片用脚本直接创建一个新的Image对象通过用一串Base64编码的字符串的方式来定义一个图片的url数据。第2步绘制图像context.drawImage(image, dx, dy)context.drawImage(image, dx, dy, widt

15、h, height)context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)08 七月 2022215.5.2 切片（Slicing）利用下面的drawImage方法可以实现图像的切片，即每次取图片中的一部分来绘制。context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)利用切片进行图像合成是最常用的图像处理方式之一。假设有一张包含了所有元素的图像，那么我们就可以用drawImage方法来合成一个新的图像。这个方

16、法的另一个好处就是不需要单独加载每一个图像。08 七月 2022225.5.3 剪切（clip）和蒙版（mask）Canvas绘图上下文（context）的clip方法用来设置一个剪辑区域，格式为：context.clip()在调用clip方法之后，接下来的代码只对这个设定的剪辑区域有效，而不会影响其他的区域，在进行局部更新时这个方法很有用。默认情况下，剪辑区域是一个左上角在 (0, 0)，宽和高分别等于canvas元素的宽和高的矩形。蒙版类似于切片，不过蒙版是半透明的，通常用于将前景对象合成到当前背景中。mask元素用于定义蒙版，在JavaScript中使用mask属性引用该蒙版。08 七月

17、 2022235.6 绘图状态与矩阵变换5.6.1 绘图状态5.6.2 变换（Transformations）08 七月 2022245.6.1 绘图状态绘图状态（Drawing State）反映了某一个时刻在canvas元素区域内绘制的图形的状态。save方法和restore方法用于保存和恢复绘图状态。绘图状态由三部分构成：（1）当前的变换矩阵（2）当前的剪切区域（3）当前渲染上下文的属性。注意，当前路径对象以及当前的位图都不属于绘图状态。路径是持续性的对象，而且可以通过beginPath方法进行重置（reset），而位图则是canvas的属性，不是渲染上下文的属性。08 七月 202225

18、5.6.2 变换（Transformations）在Canvas技术中，常用的2D变换有平移（Translate）、旋转（Rotate）、缩放（Scale）等，这些变换都会修改当前的变换矩阵。由于对canvas元素的所有的变换操作都基于变换矩阵，因此，如果不使用“save/restore”保存和恢复绘图状态，那么后续的绘图操作，都会在当前所应用的变换状态下完成。1矩阵变换基础08 七月 202226（1）平移如果matrix(a,b,c,d,e,f)的参数为matrix(1,0,0,1,dx,dy)，那么x和y的计算公式就变成了x = x+dxy = y+dy很容易看到，其结果实际上就是在x,

19、y的基础上进行平移后，新的坐标就变成了x+dx，y+dy。经过这样的参数简化后，使用起来就方便多了。08 七月 202227（2）缩放如果将matrix(a,b,c,d,e,f)变为matrix(dx,0,0,dy,0,0)，那么x和y的计算公式就变成了x = x * dxy = y * dy这个操作实际上就是让x的坐标缩放dx倍，让y的坐标缩放dy倍。这就是缩放和拉伸的原理。如果dx和dy大于1，则是放大，而dx和dy小于1，就是缩小。另外，由于x方向和y方向是相互独立的，所以可以一个方向放大，另一个方向缩小，我们把这种处理叫拉伸。注意，这里的缩放和拉伸是以区域的中心点作为原点的，而不是将左

20、上角作为原点。08 七月 202228（3）旋转如果将matrix(a,b,c,d,e,f)变为matrix(cos,sin,-sin,cos,0,0)，则：x = x*cos-y*siny = x*sin+y*cos这里的表示图形绕元素的中心点（坐标原点）顺时针旋转的角度。在CSS 3.0中，封装后的定义形式只需要指定旋转角度即可，例如：transform:rotate(40deg);08 七月 202229（4）切变切变就是将一个图形的所有边向某一相同的方向全部倾斜一定的角度。实际上就是将matrix(a,b,c,d,e,f)变为matrix(1,tan(y),tan(x),1,0,0)。

21、于是计算公式就简化成：x = x+y*tan(x)+0 = x+y*tan(x)y = x*tan(y)+y+0 = x*tan(y)+y这里的x和y分别表示向x轴正方向和向y轴正方向倾斜的角度，两者是相互独立的。08 七月 202230（5）镜像反射镜像反射就是指元素对某一条直线做镜像对称变换，就像我们看镜子里面的自己时，看到的是左右反过来的那样。如果定义(ux,uy)为直线方向的单位向量，即直线方程是y=kx，那么ux=1/sqrt(1+k*k)，uy=k/sqrt(1+k*k)。那么就是将matrix(a,b,c,d,e,f)变为：matrix(2*ux*ux-1,2*ux*uy,2*ux*uy,2*uy*uy-1,0,0)于是得到：x = (2*ux*ux-1)*