《HTML5与ASP.NET程序设计教程 第2版 教学课件 ppt 作者 马骏 第05章 Canvas》由会员分享，可在线阅读，更多相关《HTML5与ASP.NET程序设计教程 第2版 教学课件 ppt 作者 马骏 第05章 Canvas（36页珍藏版）》请在金锄头文库上搜索。
1、第5章 Canvas,2019年5月24日星期五,2,Ch5 Canvas,5.1 Canvas基础 5.2 基本形状的绘制 5.3 颜色和样式 5.4 阴影和文字绘制 5.5 像素级绘图 5.6 绘图状态与矩阵变换,2019年5月24日星期五,3,5.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元素作为画布，并规定元素的i
2、d、宽度和高度。 2绘制图形:绘制工作必须通过Canvas提供的API来完成。 Canvas原生支持的基本图形只有一种矩形，至于其他的像圆形、多边形等图形则全部由路径来负责绘制。 var canvas = document.getElementById(“myCanvas“); var ctx = canvas.getContext(“2d“);,2019年5月24日星期五,4,5.1.2 路径（beginPath、closePath、stroke、fill）,2019年5月24日星期五,5,5.1.3 移动坐标（moveTo）,可以把Canvas API提供的moveTo方法想象成是把笔提起
3、，并从一个点移动到另一个点的过程。 当初始化canvas元素对象或者调用beginPath的时候，起始坐标默认在原点(0,0)处。 大多数情况下，我们都需要调用moveTo方法将当前坐标移到其他地方，特别是用于绘制不连续的路径时，此方法非常有用。,2019年5月24日星期五,6,5.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指定线型（lin
4、eWidth、lineCap、lineJoin、miterLimit） （1）线宽 （2）线帽 （3）线段连接 （4）尖角限制,2019年5月24日星期五,8,5.2.2 矩形（fillRect、strokeRect、clearRect）,1clearRect(x, y, width, height) 2fillRect(x, y, width, height) 3strokeRect(x, y, width, height),2019年5月24日星期五,9,5.2.3 圆形和弧形（arc）,首先调用context对象的beginPath方法创建路径，然后依次将绘制的对象添加到路径中，最后调用
5、context的closePath方法关闭路径或者调用fill方法填充路径。 1arc(x, y, radius, startAngle, endAngle, anticlockwise) 2arcTo(x1, y1, x2, y2, radius),2019年5月24日星期五,10,5.2.4 用贝塞尔曲线绘制图形（quadraticCurveTo）,贝塞尔曲线可以是二次方和三次方的形式，一般用于绘制复杂而有规律的形状。二次贝塞尔曲线和三次贝塞尔曲线都有一个起点和一个终点，但二次贝塞尔曲线只有一个控制点，而三次贝塞尔曲线有两个控制点。 1quadraticCurveTo(cx, cy, x,
6、 y) 2bezierCurveTo(c1x, c1y, c2x, c2y, x, y),2019年5月24日星期五,11,5.3 颜色和样式,5.3.1 填充样式和轮廓样式（fillStyle、strokeStyle） 5.3.2 透明度（Transparency） 5.3.3 渐变（Gradients） 5.3.4 图案（Patterns）,2019年5月24日星期五,12,5.3.1 填充样式和轮廓样式（fillStyle、strokeStyle）,canvas元素对象的fill方法用于填充某个区域，填充颜色由fillStyle属性决定。stroke方法用于绘制轮廓，轮廓颜色由troke
7、Style属性决定， 颜色既可以是CSS颜色值的字符串，也可以是渐变对象或者图案对象。默认为黑色。 注意，一旦设置了fillStyle或者strokeStyle的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形绘制不同的颜色，只需要重新设置fillStyle或strokeStyle的值即可。,2019年5月24日星期五,13,5.3.2 透明度（Transparency）,通过设置上下文对象的globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式。 globalAlpha属性影响到canvas元素内所有图形的透明度，在需要绘制大量拥有相同透明度的图形时，这个属性相当
8、高效。其有效值的范围是0.0（完全透明）到1.0（完全不透明），默认值是1.0。 不过，一般情况下，由于strokeStyle和fillStyle属性接受符合CSS3规范的颜色值，所以使用CSS3的rgba()来分别设置具有透明度的填充颜色和轮廓颜色的情况比较多，也具有更好的可操作性和使用弹性。,2019年5月24日星期五,14,5.3.3 渐变（Gradients）,下面的方法新建一个canvasGradient对象，并且赋给图形的fillStyle或strokeStyle属性。 createLinearGradient(x1,y1,x2,y2) createRadialGradient(x
9、1,y1,r1,x2,y2,r2) 创建出canvasGradient对象后，就可以用addColorStop方法给它添加颜色了。 addColorStop(position, color) 在实际的项目开发中，可以根据需要添加任意多个色标（color stops），而且strokeStyle和fillStyle属性都可以通过设置渐变样式后再进行绘制来实现渐变效果。,2019年5月24日星期五,15,5.3.4 图案（Patterns）,而Canvas API提供了一个更简单的方法来实现图案的各种功能。基本格式为： createPattern(image,type) 第1个参数image可以是
10、一个Image对象的引用，也可以是另一个canvas对象。第2个参数type必须是下面的字符串值之一：repeat、repeat-x、repeat-y和no-repeat。 图案的应用与渐变类似，通过createPattern方法创建出一个pattern对象之后，将其赋给fillStyle或strokeStyle属性即可。 注意，必须确保Image对象已经加载完毕才可以调用createPattern方法，否则显示的效果可能不正确。使用Image对象的onload事件可以确保设置图案之前图像已经加载完毕。,2019年5月24日星期五,16,5.4 阴影和文字绘制,5.4.1 阴影（Shadow）
11、 5.4.2 字符文本的绘制,2019年5月24日星期五,17,5.4.1 阴影（Shadow）,在Canvas技术中，对阴影的支持有4个属性。分别是shadowOffsetX 、shadowOffsetY、shadowBlur和shadowColor。 shadowOffsetX属性和shadowOffsetY属性用来设定阴影在X和Y轴的延伸距离，这两个属性不受变换矩阵的影响。负值表示阴影会向上或向左延伸，正值则表示会向下或向右延伸，默认值都是0。 shadowBlur用于设定阴影的模糊程度，其值也不受变换矩阵的影响，默认值为0。 shadowColor用于设定阴影效果，可以是标准的CSS颜
12、色值，默认是全透明的黑色。,2019年5月24日星期五,18,5.4.2 字符文本的绘制,1fillText(text，x, y, maxWidth) strokeText(text,x,y,maxWidth) 3measureText (text) 4相关属性 font属性：设置文字字体 textAlign属性：设置文字水平对齐方式，属性值可以是start、end、left、right、center。默认值是start。 textBaseline属性：设置文字垂直对齐方式，属性值可以是top、hanging、middle、alphabetic、ideographic、bottom。默认值为a
13、lphabetic， 正是由于默认值为alphabetic，导致在浏览器中只能看到文字的很小一部分。,2019年5月24日星期五,19,5.5 像素级绘图,canvas元素的渲染上下文API提供了createImageData、getImageData和putImageData三种方法针对像素进行操作，所基于的对象都是imageData对象。imageData对象包含width、height和data三个属性，其中data包含了width height 4个字节，之所以乘以4，是因为每个像素都需要保存R、G、B值和透明度alpha。 5.5.1 导入和绘制图像 5.5.2 切片（Slicing
14、） 5.5.3 剪切（clip）和蒙版（mask）,2019年5月24日星期五,20,5.5.1 导入和绘制图像,第1步是设置图像来源 通过document.getElementById方法来获取页面内的某个图片 用脚本直接创建一个新的Image对象 通过用一串Base64编码的字符串的方式来定义一个图片的url数据。 第2步绘制图像 context.drawImage(image, dx, dy) context.drawImage(image, dx, dy, width, height) context.drawImage(image, sx, sy, sWidth, sHeight,
15、dx, dy, dWidth, dHeight),2019年5月24日星期五,21,5.5.2 切片（Slicing）,利用下面的drawImage方法可以实现图像的切片，即每次取图片中的一部分来绘制。 context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 利用切片进行图像合成是最常用的图像处理方式之一。假设有一张包含了所有元素的图像，那么我们就可以用drawImage方法来合成一个新的图像。这个方法的另一个好处就是不需要单独加载每一个图像。,2019年5月24日星期五,22,5.5.3 剪切（cl
16、ip）和蒙版（mask）,Canvas绘图上下文（context）的clip方法用来设置一个剪辑区域，格式为： context.clip() 在调用clip方法之后，接下来的代码只对这个设定的剪辑区域有效，而不会影响其他的区域，在进行局部更新时这个方法很有用。默认情况下，剪辑区域是一个左上角在 (0, 0)，宽和高分别等于canvas元素的宽和高的矩形。 蒙版类似于切片，不过蒙版是半透明的，通常用于将前景对象合成到当前背景中。mask元素用于定义蒙版，在JavaScript中使用mask属性引用该蒙版。,2019年5月24日星期五,23,5.6 绘图状态与矩阵变换,5.6.1 绘图状态 5.6.2 变换（Transformations）,2019年5月24日星期五,24,5.6.1 绘图状态,绘图状态（Drawing State）反映了某一个时刻在canvas元素区域内绘制的图形的状态。save方法和restore方法用于保存和恢复绘图状态。 绘图状态由三部分构成： （1）当前的变换矩阵 （2）当前的剪切区域 （3）当前渲染上下文的属性
