《XML与WEB Service技术(微软)：第05章 Canvas》由会员分享，可在线阅读，更多相关《XML与WEB Service技术(微软)：第05章 Canvas（36页珍藏版）》请在金锄头文库上搜索。
1、第第5章章 Canvas30 七月 20242Ch5 Canvas5.1 Canvas基础基础5.2 基本形状的绘制基本形状的绘制5.3 颜色和样式颜色和样式5.4 阴影和文字绘制阴影和文字绘制5.5 像素级绘图像素级绘图5.6 绘图状态与矩阵变换绘图状态与矩阵变换30 七月 202435.1 Canvas基础基础l5.1.1 HTML5的的canvas标记标记l5.1.2 路径（路径（beginPath、closePath、stroke、fill） l5.1.3 移动坐标（移动坐标（moveTo） 5.1.1 HTML5的的canvas标记标记1创建创建画布画布:用用canvas标记在网页上
2、绘制图形和图像，首先需标记在网页上绘制图形和图像，首先需要在页面中添加一个要在页面中添加一个canvas元素作为画布，并规定元素的元素作为画布，并规定元素的id、宽度和高度。宽度和高度。 2绘制绘制图形图形:绘制工作必须通过绘制工作必须通过Canvas提供的提供的API来完成来完成。 Canvas原生支持的基本图形只有一种矩形，至于其他的像圆形、原生支持的基本图形只有一种矩形，至于其他的像圆形、多边形等图形则全部由路径来负责绘制。多边形等图形则全部由路径来负责绘制。var canvas = document.getElementById(myCanvas);var ctx = canvas.g
3、etContext(2d);30 七月 202445.1.2 路径（路径（beginPath、closePath、stroke、fill）方方 法法说说 明明context.beginPath()清清除除包包含含的的所所有有子子路路径径，还还原原到到默默认认的的空空状状态态context.fill()用当前的填充样式填充路径用当前的填充样式填充路径context.stroke()用当前的轮廓样式绘制路径轮廓用当前的轮廓样式绘制路径轮廓context.scrollPathIntoView()滚滚动动当当前前路路径径到到可可视视区区域域，对对于于手手机机等等小小屏屏幕的设备来说，该方法非常有用幕的
4、设备来说，该方法非常有用context.clip()创创建建剪剪切切区区域域，即即将将绘绘制制范范围围限限制制到到剪剪切切区区域内域内context.isPointInPath(x, y)判判断断某某个个点点是是否否在在当当前前路路径径内内（true或或者者false）30 七月 202455.1.3 移动坐标（移动坐标（moveTo）l可以把可以把Canvas API提供的提供的moveTo方法想象成是把笔提起，并方法想象成是把笔提起，并从一个点移动到另一个点的过程。从一个点移动到另一个点的过程。l当初始化当初始化canvas元素对象或者调用元素对象或者调用beginPath的时候，起始坐的
5、时候，起始坐标默认在原点标默认在原点(0,0)处。处。l大多数情况下，我们都需要调用大多数情况下，我们都需要调用moveTo方法将当前坐标移到方法将当前坐标移到其他地方，特别是用于绘制不连续的路径时，此方法非常有用其他地方，特别是用于绘制不连续的路径时，此方法非常有用。30 七月 202465.2 基本形状的绘制基本形状的绘制l5.2.1 直线（直线（lineTo）l5.2.2 矩形（矩形（fillRect、strokeRect、clearRect）l5.2.3 圆形和弧形（圆形和弧形（arc）l5.2.4 用贝塞尔曲线绘制图形（用贝塞尔曲线绘制图形（quadraticCurveTo）5.2.
6、1 直线（直线（lineTo）1用用lineTo绘制直线绘制直线2指定线型（指定线型（lineWidth、lineCap、lineJoin、miterLimit）（1）线宽）线宽（2）线帽）线帽（3）线段连接）线段连接（4）尖角限制）尖角限制30 七月 202485.2.2 矩形（矩形（fillRect、strokeRect、clearRect）l1clearRect(x, y, width, height)l2fillRect(x, y, width, height)l3strokeRect(x, y, width, height)30 七月 202495.2.3 圆形和弧形（圆形和弧形（a
7、rc）l首先调用首先调用context对象的对象的beginPath方法创建路径，然后依次将方法创建路径，然后依次将绘制的对象添加到路径中，最后调用绘制的对象添加到路径中，最后调用context的的closePath方法方法关闭路径或者调用关闭路径或者调用fill方法填充路径。方法填充路径。l1arc(x, y, radius, startAngle, endAngle, anticlockwise)l2arcTo(x1, y1, x2, y2, radius)30 七月 2024105.2.4 用贝塞尔曲线绘制图形用贝塞尔曲线绘制图形（quadraticCurveTo）l贝塞尔曲线可以是二次
8、方和三次方的形式，一般用于绘制复杂贝塞尔曲线可以是二次方和三次方的形式，一般用于绘制复杂而有规律的形状。二次贝塞尔曲线和三次贝塞尔曲线都有一个而有规律的形状。二次贝塞尔曲线和三次贝塞尔曲线都有一个起点和一个终点，但二次贝塞尔曲线只有一个控制点，而三次起点和一个终点，但二次贝塞尔曲线只有一个控制点，而三次贝塞尔曲线有两个贝塞尔曲线有两个控制点控制点。1quadraticCurveTo(cx, cy, x, y)2bezierCurveTo(c1x, c1y, c2x, c2y, x, y)30 七月 202411 5.3 颜色和样式颜色和样式l5.3.1 填充样式和轮廓样式（填充样式和轮廓样式（
9、fillStyle、strokeStyle）l5.3.2 透明度（透明度（Transparency）l5.3.3 渐变（渐变（Gradients）l5.3.4 图案（图案（Patterns）30 七月 2024125.3.1 填充样式和轮廓样式（填充样式和轮廓样式（fillStyle、strokeStyle）lcanvas元素对象的元素对象的fill方法用于填充某个区域，填充颜色由方法用于填充某个区域，填充颜色由fillStyle属性决定。属性决定。stroke方法用于绘制轮廓，轮廓颜色由方法用于绘制轮廓，轮廓颜色由trokeStyle属性决定，属性决定， l颜色既可以是颜色既可以是CSS颜色
10、值的字符串，也可以是渐变对象或者图颜色值的字符串，也可以是渐变对象或者图案对象。默认为黑色。案对象。默认为黑色。l注意，一旦设置了注意，一旦设置了fillStyle或者或者strokeStyle的值，那么这个新的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形绘制不值就会成为新绘制的图形的默认值。如果要给每个图形绘制不同的颜色，只需要重新设置同的颜色，只需要重新设置fillStyle或或strokeStyle的值即可。的值即可。30 七月 2024135.3.2 透明度（透明度（Transparency）l通过设置上下文对象的通过设置上下文对象的globalAlpha属性或者使用
11、一个半透明属性或者使用一个半透明颜色作为轮廓或填充的样式。颜色作为轮廓或填充的样式。lglobalAlpha属性影响到属性影响到canvas元素内所有图形的透明度，在元素内所有图形的透明度，在需要绘制大量拥有相同透明度的图形时，这个属性相当高效。需要绘制大量拥有相同透明度的图形时，这个属性相当高效。其有效值的范围是其有效值的范围是0.0（完全透明）到（完全透明）到1.0（完全不透明），默（完全不透明），默认值是认值是1.0。l不过，一般情况下，由于不过，一般情况下，由于strokeStyle和和fillStyle属性接受符合属性接受符合CSS3规范的颜色值，所以使用规范的颜色值，所以使用CSS
12、3的的rgba()来分别设置具有来分别设置具有透明度的填充颜色和轮廓颜色的情况比较多，也具有更好的可透明度的填充颜色和轮廓颜色的情况比较多，也具有更好的可操作性和使用弹性。操作性和使用弹性。30 七月 2024145.3.3 渐变（渐变（Gradients）l下面的方法新建一个下面的方法新建一个canvasGradient对象，并且赋给图形的对象，并且赋给图形的fillStyle或或strokeStyle属性。属性。createLinearGradient(x1,y1,x2,y2)createRadialGradient(x1,y1,r1,x2,y2,r2)l创建出创建出canvasGradi
13、ent对象后，就可以用对象后，就可以用addColorStop方法方法给它添加颜色了。给它添加颜色了。addColorStop(position, color)l在实际的项目开发中，可以根据需要添加任意多个色标在实际的项目开发中，可以根据需要添加任意多个色标（color stops），而且），而且strokeStyle和和fillStyle属性都可以通过属性都可以通过设置渐变样式后再进行绘制来实现渐变效果。设置渐变样式后再进行绘制来实现渐变效果。30 七月 2024155.3.4 图案（图案（Patterns）l而而Canvas API提供了一个更简单的方法来实现图案的各种功提供了一个更简单的
14、方法来实现图案的各种功能。基本格式为：能。基本格式为：createPattern(image,type)第第1个参数个参数image可以是一个可以是一个Image对象的引用，也可以是另一个对象的引用，也可以是另一个canvas对象。第对象。第2个参数个参数type必须是下面的字符串值之一：必须是下面的字符串值之一：repeat、repeat-x、repeat-y和和no-repeat。l图案的应用与渐变类似，通过图案的应用与渐变类似，通过createPattern方法创建出一个方法创建出一个pattern对象之后，将其赋给对象之后，将其赋给fillStyle或或strokeStyle属性即可。
15、属性即可。l注意，必须确保注意，必须确保Image对象已经加载完毕才可以调用对象已经加载完毕才可以调用createPattern方法，否则显示的效果可能不正确。使用方法，否则显示的效果可能不正确。使用Image对象的对象的onload事件可以确保设置图案之前图像已经加载完毕。事件可以确保设置图案之前图像已经加载完毕。30 七月 2024165.4 阴影和文字绘制阴影和文字绘制l5.4.1 阴影（阴影（Shadow）l5.4.2 字符文本的绘制字符文本的绘制30 七月 2024175.4.1 阴影（阴影（Shadow）l在在Canvas技术中，对阴影的支持有技术中，对阴影的支持有4个属性。分别是
16、个属性。分别是shadowOffsetX 、shadowOffsetY、shadowBlur和和shadowColor。lshadowOffsetX属性和属性和shadowOffsetY属性用来设定阴影在属性用来设定阴影在X和和Y轴的延伸距离，这两个属性不受变换矩阵的影响。负值表轴的延伸距离，这两个属性不受变换矩阵的影响。负值表示阴影会向上或向左延伸，正值则表示会向下或向右延伸，默示阴影会向上或向左延伸，正值则表示会向下或向右延伸，默认值都是认值都是0。lshadowBlur用于设定阴影的模糊程度，其值也不受变换矩阵用于设定阴影的模糊程度，其值也不受变换矩阵的影响，默认值为的影响，默认值为0。
17、lshadowColor用于设定阴影效果，可以是标准的用于设定阴影效果，可以是标准的CSS颜色值，颜色值，默认是全透明的黑色。默认是全透明的黑色。30 七月 2024185.4.2 字符文本的绘制字符文本的绘制l1fillText(text，x, y, maxWidth)lstrokeText(text,x,y,maxWidth)l3measureText (text)l4相关属性相关属性font属性：设置文字字体属性：设置文字字体textAlign属性：设置文字水平对齐方式，属性值可以是属性：设置文字水平对齐方式，属性值可以是start、end、left、right、center。默认值是。
18、默认值是start。textBaseline属性：设置文字垂直对齐方式，属性值可以是属性：设置文字垂直对齐方式，属性值可以是top、hanging、middle、alphabetic、ideographic、bottom。默认。默认值为值为alphabetic， 正是由于默认值为正是由于默认值为alphabetic，导致在浏览器，导致在浏览器中只能看到文字的很小一部分。中只能看到文字的很小一部分。30 七月 2024195.5 像素级绘图像素级绘图lcanvas元素的渲染上下文元素的渲染上下文API提供了提供了createImageData、getImageData和和putImageData
19、三种方法针对像素进行操作，三种方法针对像素进行操作，所基于的对象都是所基于的对象都是imageData对象。对象。imageData对象包含对象包含width、height和和data三个属性，其中三个属性，其中data包含了包含了width height 4个字节，之所以乘以个字节，之所以乘以4，是因为每个像素都需要保存，是因为每个像素都需要保存R、G、B值和透明度值和透明度alpha。l5.5.1 导入和绘制图像导入和绘制图像l5.5.2 切片（切片（Slicing）l5.5.3 剪切（剪切（clip）和蒙版（）和蒙版（mask）30 七月 2024205.5.1 导入和绘制图像导入和绘制
20、图像l第第1步是设置图像来源步是设置图像来源通过通过document.getElementById方法来获取页面内的某个图片方法来获取页面内的某个图片用脚本直接创建一个新的用脚本直接创建一个新的Image对象对象通过用一串通过用一串Base64编码的字符串的方式来定义一个图片的编码的字符串的方式来定义一个图片的url数数据。据。l第第2步绘制图像步绘制图像context.drawImage(image, dx, dy)context.drawImage(image, dx, dy, width, height)context.drawImage(image, sx, sy, sWidth, s
21、Height, dx, dy, dWidth, dHeight)30 七月 2024215.5.2 切片（切片（Slicing）l利用下面的利用下面的drawImage方法可以实现图像的切片，即每次取图方法可以实现图像的切片，即每次取图片中的一部分来绘制。片中的一部分来绘制。context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)l利用切片进行图像合成是最常用的图像处理方式之一。假设有利用切片进行图像合成是最常用的图像处理方式之一。假设有一张包含了所有元素的图像，那么我们就可以用一张包含了所有元素的图像
22、，那么我们就可以用drawImage方方法来合成一个新的图像。这个方法的另一个好处就是不需要单法来合成一个新的图像。这个方法的另一个好处就是不需要单独加载每一个图像。独加载每一个图像。30 七月 2024225.5.3 剪切（剪切（clip）和蒙版（）和蒙版（mask）lCanvas绘图上下文（绘图上下文（context）的）的clip方法用来设置一个剪辑方法用来设置一个剪辑区域，格式为：区域，格式为：context.clip()l在调用在调用clip方法之后，接下来的代码只对这个设定的剪辑区域方法之后，接下来的代码只对这个设定的剪辑区域有效，而不会影响其他的区域，在进行局部更新时这个方法很有
23、效，而不会影响其他的区域，在进行局部更新时这个方法很有用。默认情况下，剪辑区域是一个左上角在有用。默认情况下，剪辑区域是一个左上角在 (0, 0)，宽和高，宽和高分别等于分别等于canvas元素的宽和高的矩形。元素的宽和高的矩形。l蒙版类似于切片，不过蒙版是半透明的，通常用于将前景对象蒙版类似于切片，不过蒙版是半透明的，通常用于将前景对象合成到当前背景中。合成到当前背景中。mask元素用于定义蒙版，在元素用于定义蒙版，在JavaScript中使用中使用mask属性引用该蒙版。属性引用该蒙版。30 七月 2024235.6 绘图状态与矩阵变换绘图状态与矩阵变换l5.6.1 绘图状态绘图状态l5.
24、6.2 变换（变换（Transformations）30 七月 2024245.6.1 绘图状态绘图状态l绘图状态（绘图状态（Drawing State）反映了某一个时刻在）反映了某一个时刻在canvas元素元素区域内绘制的图形的状态。区域内绘制的图形的状态。save方法和方法和restore方法用于保存方法用于保存和恢复绘图状态。和恢复绘图状态。l绘图状态由三部分构成：绘图状态由三部分构成：（1）当前的变换矩阵）当前的变换矩阵（2）当前的剪切区域）当前的剪切区域（3）当前渲染上下文的属性。）当前渲染上下文的属性。l注意，当前路径对象以及当前的位图都不属于绘图状态。路径注意，当前路径对象以及当
25、前的位图都不属于绘图状态。路径是持续性的对象，而且可以通过是持续性的对象，而且可以通过beginPath方法进行重置方法进行重置（reset），而位图则是），而位图则是canvas的属性，不是渲染上下文的属的属性，不是渲染上下文的属性。性。30 七月 2024255.6.2 变换（变换（Transformations）l在在Canvas技术中，常用的技术中，常用的2D变换有平移（变换有平移（Translate）、旋转）、旋转（Rotate）、缩放（）、缩放（Scale）等，这些变换都会修改当前的变）等，这些变换都会修改当前的变换矩阵。由于对换矩阵。由于对canvas元素的所有的变换操作都基于变
26、换矩阵，元素的所有的变换操作都基于变换矩阵，因此，如果不使用因此，如果不使用“save/restore”保存和恢复绘图状态，那保存和恢复绘图状态，那么后续的绘图操作，都会在当前所应用的变换状态下完成。么后续的绘图操作，都会在当前所应用的变换状态下完成。l1矩阵变换基础矩阵变换基础30 七月 202426l（1）平移）平移l如果如果matrix(a,b,c,d,e,f)的参数为的参数为matrix(1,0,0,1,dx,dy)，那么，那么x和和y的计算公式就变成了的计算公式就变成了lx = x+dxly = y+dyl很容易看到，其结果实际上就是在很容易看到，其结果实际上就是在x,y的基础上进行
27、平移后，新的基础上进行平移后，新的坐标就变成了的坐标就变成了x+dx，y+dy。经过这样的参数简化后，使用。经过这样的参数简化后，使用起来就方便多了。起来就方便多了。30 七月 202427l（2）缩放）缩放l如果将如果将matrix(a,b,c,d,e,f)变为变为matrix(dx,0,0,dy,0,0)，那么，那么x和和y的计算公式就变成了的计算公式就变成了x = x * dxy = y * dyl这个操作实际上就是让这个操作实际上就是让x的坐标缩放的坐标缩放dx倍，让倍，让y的坐标缩放的坐标缩放dy倍。倍。这就是缩放和拉伸的原理。如果这就是缩放和拉伸的原理。如果dx和和dy大于大于1，
28、则是放大，而，则是放大，而dx和和dy小于小于1，就是缩小。另外，由于，就是缩小。另外，由于x方向和方向和y方向是相互独方向是相互独立的，所以可以一个方向放大，另一个方向缩小，我们把这种立的，所以可以一个方向放大，另一个方向缩小，我们把这种处理叫拉伸。处理叫拉伸。l注意，这里的缩放和拉伸是以区域的中心点作为原点的，而不注意，这里的缩放和拉伸是以区域的中心点作为原点的，而不是将左上角作为原点。是将左上角作为原点。30 七月 202428l（3）旋转）旋转l如果将如果将matrix(a,b,c,d,e,f)变为变为matrix(cos,sin,-sin,cos,0,0)，则：，则：lx = x*c
29、os-y*sinly = x*sin+y*cosl这里的这里的表示图形绕元素的中心点（坐标原点）顺时针旋转的表示图形绕元素的中心点（坐标原点）顺时针旋转的角度。角度。l在在CSS 3.0中，封装后的定义形式只需要指定旋转角度即可，中，封装后的定义形式只需要指定旋转角度即可，例如：例如：transform:rotate(40deg);30 七月 202429l（4）切变）切变l切变就是将一个图形的所有边向某一相同的方向全部倾斜一定切变就是将一个图形的所有边向某一相同的方向全部倾斜一定的角度。实际上就是将的角度。实际上就是将matrix(a,b,c,d,e,f)变为变为matrix(1,tan(y
30、),tan(x),1,0,0)。于是计算公式就简化成：。于是计算公式就简化成：lx = x+y*tan(x)+0 = x+y*tan(x)ly = x*tan(y)+y+0 = x*tan(y)+yl这里的这里的x和和y分别表示向分别表示向x轴正方向和向轴正方向和向y轴正方向倾斜的角度，轴正方向倾斜的角度，两者是相互独立的。两者是相互独立的。30 七月 202430l（5）镜像反射）镜像反射l镜像反射就是指元素对某一条直线做镜像对称变换，就像我们镜像反射就是指元素对某一条直线做镜像对称变换，就像我们看镜子里面的自己时，看到的是左右反过来的那样。看镜子里面的自己时，看到的是左右反过来的那样。l如
31、果定义如果定义(ux,uy)为直线方向的单位向量，即直线方程是为直线方向的单位向量，即直线方程是y=kx，那么，那么ux=1/sqrt(1+k*k)，uy=k/sqrt(1+k*k)。那么就是将。那么就是将matrix(a,b,c,d,e,f)变为：变为：lmatrix(2*ux*ux-1,2*ux*uy,2*ux*uy,2*uy*uy-1,0,0)l于是得到：于是得到：lx = (2*ux*ux-1)*x+2*ux*uy*yly = 2*ux*uy*x+(2*uy*uy-1)*y30 七月 202431l2translate(x, y)l在在Canvas提供的提供的API中，平移（中，平移（
32、translate）操作用于先将图像）操作用于先将图像原点移动到某个位置，然后再进行绘制。格式为：原点移动到某个位置，然后再进行绘制。格式为：lcontext.translate(x,y)l其中，参数其中，参数x和和y分别表示图像在分别表示图像在x方向和方向和y方向上移动的像素数。方向上移动的像素数。30 七月 202432l3rotate（angle）lrotate方法用于将图像旋转指定的角度。格式为：方法用于将图像旋转指定的角度。格式为：lcontext.rotate（angle）l其中，参数其中，参数angle是以弧度为单位的值，正值表示按顺时针方是以弧度为单位的值，正值表示按顺时针方向
33、旋转，负值表示按逆时针方向旋转。向旋转，负值表示按逆时针方向旋转。30 七月 202433l4scale(x, y)l利用利用scale方法可以改变图像的大小，格式为：方法可以改变图像的大小，格式为：lcontext.scale(x, y)l其中，其中，x参数指明水平方向的缩放系数，参数指明水平方向的缩放系数，y参数指明垂直方向的参数指明垂直方向的缩放系数。缩放系数。30 七月 202434l4transform(m11, m12, m21, m22, dx, dy)ltransform方法用于对下面的方法用于对下面的33矩阵进行矩阵变换，通过改变矩阵进行矩阵变换，通过改变矩阵中各参数的值，得
34、到不同的变换结果。矩阵中各参数的值，得到不同的变换结果。l格式为：格式为：lcontext.transform(m11, m12, m21, m22, dx, dy)l或者：或者：lcontext.setTransform(m11, m12, m21, m22, dx, dy)30 七月 20243530 七月 202436本章作业本章作业l1使用使用Canvas技术实现如下图所示技术实现如下图所示画三条不同颜色的线段。画三条不同颜色的线段。l2使用使用Canvas技术将图像边界显示技术将图像边界显示为蓝色半透明阴影效果。为蓝色半透明阴影效果。l3请使用请使用Canvas技术实现两个图像技术实现两个图像的叠加效果。的叠加效果。
