第6章-HTML5的canvas绘图(HTML5与CSS3-Web前端开发技术)

HTML5+CSS3Web前端开发技术第6章HTML5的Canvas绘图canvas概述1绘制矩形2使用路径绘制图形3绘制颜色渐变的图形4使用坐标变换和矩阵变换绘图5在canvas中使用图像6绘制文字7使用canvas绘制动画8HTML5+CSS3Web前端开发技术6.1canvas概述canvas是HTML5在网页上绘制图形的容器。在页面上放置的canvas元素相当于一块矩形画布。canvas通过JS脚本可以绘制矩形、圆形、直线、字符以及图像等图形。1．创建canvas元素向HTML5页面添加canvas元素，需要指定元素的id、width和height属性。canvasid=canvasIdwidth=height=/canvasHTML5+CSS3Web前端开发技术6.1canvas概述创建canvas元素示例demo0601.htmlHTML5+CSS3Web前端开发技术HTML5+CSS3Web前端开发技术HTML5+CSS3Web前端开发技术6.2绘制矩形2．绘图时的颜色与透明度属性（1）颜色颜色名：直接使用颜色的英文名称作为属性值#rrggbb：用一个6位的十六进制数表示颜色，例如，#0000FF表示蓝色#rgb：是#rrggbb的一种简写方式，例如，#0000FF可以表示为#00F，#00FFDD表示为#0FD。rgb(rrr,ggg,bbb)：使用十进制数表示颜色的红、绿、蓝分量，其中，rrr、ggg、bbb都是0～255的十进制整数。例如，rgb(0,0,0)代表黑色。rgb(rrr%,ggg%,bbb%)：使用百分比表示颜色的红、绿、蓝分量，例如，rgb(50%,50%,50%)表示rgb(128,128,128)。rgba(rrr,ggg,bbb,alpha）：使用十进制数表示颜色的红、绿、蓝分量，alpha表示颜色的透明度，例如rgba(0,128,0,0.5)表示半透明的绿色。HTML5+CSS3Web前端开发技术6.2绘制矩形2．绘图时的颜色与透明度属性创建canvas元素不同颜色示例demo0603.htmlHTML5+CSS3Web前端开发技术6.2绘制矩形（2）透明度绘图上下文的globalAlpha属性设置或返回图形的当前透明度值（alpha或transparency）。ctx.globalAlpha=number;创建canvas元素不同颜色示例script04.jsHTML5+CSS3Web前端开发技术6.2绘制矩形（2）透明度创建canvas元素不同颜色示例script05.jsHTML5+CSS3Web前端开发技术6.3使用路径绘制图形1．绘制圆形canvas惟一支持基本形状－矩形。其它形状必须通过组合一个或多个路径来创建。使用路径来绘制图形，先要取得绘图上下文，然后按照开始创建路径、创建图形路径、关闭路径，调用绘图方法等步骤来完成。（1）开始创建路径ctx.beginPath();（2）绘制图形路径ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)（3）关闭路径ctx.closePath();（4）设定绘制样式，绘制图形HTML5+CSS3Web前端开发技术6.3使用路径绘制图形示例6-6(script06.js)绘制了圆形和圆弧边框。HTML5+CSS3Web前端开发技术6.3使用路径绘制图形2．绘制直线（1）绘制直线的方法绘制直线也需要使用路径，这里的直线实际上是线段（条），有起点和终点。绘制直线使用moveTo()和lineTo()两个方法。moveTo(x,y);lineTo(x,y);HTML5+CSS3Web前端开发技术6.3使用路径绘制图形（2）绘制线条使用的一些属性HTML5可以在绘制线条时使用绘图上下文的一些属性，例如lineWidth、lineCap、lineJoin等。属性描述值lineWidth设置或返回当前的线条宽度线条宽度的数值，单位是像素lineCap设置或返回线条的结束端点样式butt：默认属性值，不为直线添加端点round：为直线添加圆形端点square：为直线添加正方形端点lineJoin设置或返回两条线相交时，交汇处的拐角形状miter：默认属性值，创建尖角拐角round：创建圆角拐角bevel：创建斜角拐角表6-2描述线条样式的一些属性HTML5+CSS3Web前端开发技术6.3使用路径绘制图形示例6-8(script08.js)绘制了宽度从2像素到10像素不等的5条直线。HTML5+CSS3Web前端开发技术6.3使用路径绘制图形6-9(script09.js)示例中先用数组保存butt、round、square三种线条端点属性值，然后使用循环访问数组元素，为每条直线添加不同端点。HTML5+CSS3Web前端开发技术6.3使用路径绘制图形示例6-10（script10.js）展示了不同拐角形状。HTML5+CSS3Web前端开发技术6.3使用路径绘制图形3．绘制曲线圆弧是一种典型的曲线，可以使用绘图上下文对象的arcTo()方法绘制曲线，该方法与lineTo()方法类似，将在路径中添加一条曲线，并使用直线连接当前坐标点与曲线起点。图6-12arcTo方法绘制圆弧示意图HTML5+CSS3Web前端开发技术6.3使用路径绘制图形示例6-11使用绘图上下文对象的arcTo()方法绘制了一条曲线图6-12arcTo方法绘制圆弧示意图HTML5+CSS3Web前端开发技术6.3使用路径绘制图形示例6-12（script12.js）绘制了两联接在一起的弧线图6-12arcTo方法绘制圆弧示意图HTML5+CSS3Web前端开发技术6.4绘制颜色渐变的图形1．绘制线性渐变绘制线性渐变，需要使用到LinearGradient对象。使用绘图上下文对象的createLinearGradient()方法可以创建该对象.ctx.createLinearGradient(xStart,yStart,xEnd,yEnd);示例6-13（script13.js）绘制了线性渐变图形HTML5+CSS3Web前端开发技术6.4绘制颜色渐变的图形2．绘制径向渐变使用绘图上下文对象的createRadialGradient()方法绘制径向渐变.context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);示例6-14（script14.js）绘制了径向渐变图形。HTML5+CSS3Web前端开发技术6.5使用坐标变换和矩阵变换绘图1．canvas的坐标系统CanvasAPI使用二维坐标系统，画布的左上角对应于坐标原点（0,0），向右和向下分别为X轴和Y轴，X轴向右为正，Y轴向下为正，以一个像素为一个坐标单位进行绘制。图6-16是默认的坐标系统。HTML5+CSS3Web前端开发技术6.5使用坐标变换和矩阵变换绘图2．坐标变换绘制图形时，如果需要旋转图形，或者对图形进行变形处理，使用CanvasAPI的坐标变换就可以实现这些效果。对坐标的变换处理有平移、缩放和旋转3种方式。（1）平移CanvasAPI的translate()实现平移，方法定义如下：ctx.translate(x,y);（2）缩放CanvasAPI的scale()方法可以实现缩小或放大，方法定义如下：ctx.scale(x,y);（3）旋转CanvasAPI的的rotate()方法可以旋转图形，方法定义如下：ctx.rotate(angle);HTML5+CSS3Web前端开发技术6.5使用坐标变换和矩阵变换绘图示例6-15（script15.js）中使用坐标变换方法绘制了一组变形图形。HTML5+CSS3Web前端开发技术6.5使用坐标变换和矩阵变换绘图3．使用路径绘制图形的坐标变换使用坐标变换方法对矩形这样的基本形状的做变形处理比较方便。解决问题的办法是，先写一个创建路径的函数，然后在坐标变换时调用该函数。示例6-16（script16.js）将坐标变换与路径结合使用。HTML5+CSS3Web前端开发技术6.5使用坐标变换和矩阵变换绘图4．矩阵变换矩阵变换可以实现比坐标变换更加复杂的图形变换。（1）使用transform()方法实现图形变换使用绘图上下文对象的transform()方法修改变换矩阵，定义如下。ctx.transform(a,b,c,d,dx,dy)a，b，c，d参数用来指定如何变形dx，dy参数用来移动坐标原点。a和d分别表示水平旋转（缩放）和垂直旋转或（缩放）的倍数值，默认为1;b和c分别表示水平倾斜和垂直倾斜的量，取值从-1到1;dx和dy表示将坐标原点水平方向和垂直方向位移的距离，单位默认为像素。HTML5+CSS3Web前端开发技术6.5使用坐标变换和矩阵变换绘图示例6-17给出了使用变换矩阵进行图形变形的示例。HTML5+CSS3Web前端开发技术6.5使用坐标变换和矩阵变换绘图（2）使用setTransform()方法实现图形变换setTransform()方法用来重置变换矩阵。该方法的定义如下。context.setTransform(a,b,c,d,x,y)示例6-18实现一个了文字的倒影效果。HTML5+CSS3Web前端开发技术6.6在canvas中使用图像1．绘制图像CanvasAPI可以读取本地或网络上的图像文件，然后将该图像绘制在画布中，这主要是通过drawImage()方法实现的。（1）drawImage()方法drawImage()方法由绘图上下文ctx调用，该方法定义有三种形式.ctx.drawImage(image,x,y);ctx.drawImage(image,x,y,w,h);ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);HTML5+CSS3Web前端开发技术6.6在canvas中使用图像(2)ctx绘制图像的步骤创建Image对象使用不带参数的new方法创建Image对象，然后在该Image对象的src属性中指定需要绘制的图像文件的路径，具体代码如下。image=newImage();image.src=“images/tu1.jpg”;//设置图像路径和文件名在Image对象的onload事件中同步执行绘制图像的方法创建Image对象后，就可以通过drawImage()方法绘制该图像文件了,代码如下:image.onload=function(){//绘制图像}HTML5+CSS3Web前端开发技术6.6在canvas中使用图像(3)绘制图像的示例示例6-19给出了在画布上绘制一个简单的图像HTML5+CSS3Web前端开发技术6.6在canvas中使用图像2．图像平铺在HTML5中使用绘图上下文对象的createPattern()方法来实现平铺非常容易，createPattern方法的定义如下。context.createPattern(image,type);该方法需要定义2个参数，image参数为要平铺的图像，type参数必须取下面字符串值之一。no-repeat：不平铺repeat-x：横向平铺repeat-y：纵向平铺repeat：全方向平铺HTML5+CSS3Web前端开发技术6.6在canvas中使用图像示例6-20实现图片的重复填充，执行效果如图6-22所示。HTML5+CSS3Web前端开发技术6.6在canvas中使用图像3．图像裁剪示例6-21实现了图像裁剪功能。HTML5+CSS3Web前端开发技术6.7绘制文字1．绘制文字的方法绘制文字时可以主要使用filltext()方法或strokeText()方法。fillText()方法用填充方式绘制文本，strokeText()方法用轮廓方式绘制文本，这两个方法的格式定义如下。voidfillText(text,x,y,[maxw