HTML第6章-HTML5的canvas绘图课件.ppt

1、第第6章章 HTML5的Canvas绘图canvas概述概述1绘制矩形绘制矩形2使用路径绘制图形使用路径绘制图形3绘制颜色渐变的图形绘制颜色渐变的图形4使用坐标变换和矩阵变换绘图使用坐标变换和矩阵变换绘图5在在canvas中使用图像中使用图像6绘制文字绘制文字7使用使用canvas绘制动画绘制动画86.1 canvas概述 canvas是是HTML5在网页上绘制图形的容器。页面在网页上绘制图形的容器。页面上上的的canvas元素相当于一块矩形画布元素相当于一块矩形画布。canvas通过通过JS脚本可以绘制矩形、圆形、直线、字脚本可以绘制矩形、圆形、直线、字符以及图像等图形。符以及图像等图形。1

2、创建创建canvas元素元素 向向HTML5页面添加页面添加canvas元素，需要指定元素的元素，需要指定元素的id、width和和height属性。属性。6.1 canvas概述创建创建canvas元素元素示例示例demo0601.html6.1 canvas概述2canvas绘图的步骤绘图的步骤（1）获取canvas元素（2）获取绘图上下文（context）（3）设定绘图样式（style）（4）绘制图形6.2 绘制矩形绘制矩形1绘制矩形的方法绘制矩形的方法Canvas API中绘制矩形方法包括以下中绘制矩形方法包括以下4个个：方法方法描述描述rect()创建矩形创建矩形fillRect()

3、绘制被填充的矩形绘制被填充的矩形strokeRect()绘制矩形（无填充）绘制矩形（无填充）clearRect()在给定的矩形内清除指定的像素在给定的矩形内清除指定的像素6.2 绘制矩形绘制矩形2绘图时的颜色与透明度属性绘图时的颜色与透明度属性（1）颜色颜色 颜色名：颜色的英文名称作为属性值颜色名：颜色的英文名称作为属性值#rrggbb：6位的十六进制数表示颜色，例如，位的十六进制数表示颜色，例如，#0000FF表示蓝色表示蓝色#rgb：是：是#rrggbb的一种简写方式，例如，的一种简写方式，例如，#0000FF可以表示为可以表示为#00Frgb(rrr,ggg,bbb)：使用十进制数表示颜

4、色的红、绿、蓝分量：使用十进制数表示颜色的红、绿、蓝分量。rrr、ggg、bbb都是都是0255的十进制整数。例如，的十进制整数。例如，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)表示半透明表示半透明的绿色

5、。的绿色。6.2 绘制矩形绘制矩形2绘图时的颜色与透明度属性绘图时的颜色与透明度属性创建创建canvas元素元素不同颜色示例不同颜色示例demo0603.html6.2 绘制矩形绘制矩形（2）透明度透明度绘图上下文的globalAlpha属性设置或返回图形的当前透明度值（alpha 或 transparency）。ctx.globalAlpha=number;创建canvas元素不同颜色示例script04.js6.2 绘制矩形绘制矩形（2）透明度透明度创建canvas元素不同颜色示例script05.js6.3 使用路径绘制图形1绘制圆形绘制圆形canvas惟一支持基本形状惟一支持基本形状矩

6、形矩形。其它形状必须通过组合其它形状必须通过组合一个或多个路径来创建。使用路径来绘制图形，先要取得绘一个或多个路径来创建。使用路径来绘制图形，先要取得绘图上下文，然后按照开始创建路径、创建图形路径、关闭路图上下文，然后按照开始创建路径、创建图形路径、关闭路径，调用绘图方法等步骤来完成。径，调用绘图方法等步骤来完成。（1）开始创建路径）开始创建路径 ctx.beginPath();（2）绘制图形路径）绘制图形路径 ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)（3）关闭路径）关闭路径ctx.closePath();（4）设定绘制样式，绘

7、制图形）设定绘制样式，绘制图形6.3 使用路径绘制图形示例6-6(script06.js)绘制了圆形和圆弧边框。6.3 使用路径绘制图形2绘制绘制直线直线（1）绘制直线的方法绘制直线的方法绘制直线也需要使用路径，这里的直线实际上是线段（条），有起点和终点绘制直线也需要使用路径，这里的直线实际上是线段（条），有起点和终点。绘制直线使用。绘制直线使用moveTo()和和lineTo()两个方法。两个方法。moveTo(x,y);lineTo(x,y);6.3 使用路径绘制图形（2）绘制线条使用的一些属性绘制线条使用的一些属性 HTML5可以在绘制线条时使用绘图上下文的一些属性，例如可以在绘制线条时

8、使用绘图上下文的一些属性，例如lineWidth、lineCap、lineJoin等等。属性描述值lineWidth设置或返回当前的线条宽度线条宽度的数值，单位是像素lineCap设置或返回线条的结束端点样式butt：默认属性值，不为直线添加端点round：为直线添加圆形端点square：为直线添加正方形端点lineJoin设置或返回两条线相交时，交汇处的拐角形状miter：默认属性值，创建尖角拐角round：创建圆角拐角bevel：创建斜角拐角6.3 使用路径绘制图形示例示例6-8(script08.js)绘制了宽度从绘制了宽度从2像素到像素到10像素不等的像素不等的5条直线。条直线。6.3

9、 使用路径绘制图形script09.js示例中先用数组保存示例中先用数组保存butt、round、square三三种线条端点属性值，然后使用循环访问数组元素，为每条直线种线条端点属性值，然后使用循环访问数组元素，为每条直线添加不同端点。添加不同端点。6.3 使用路径绘制图形script10.js展展示了不同拐角示了不同拐角形状形状。6.3 使用路径绘制图形3绘制曲线绘制曲线圆弧是一种典型的曲线，可以使用绘图上下文对象的arcTo()方法绘制曲线，该方法与lineTo()方法类似，将在路径中添加一条曲线，并使用直线连接当前坐标点与曲线起点。6.3 使用路径绘制图形示例6-11使用绘图上下文对象的

10、arcTo()方法绘制了一条曲线 图图6-12 arcTo方法绘制圆弧示意图方法绘制圆弧示意图6.3 使用路径绘制图形script12.js绘制了两联接在一起的弧线绘制了两联接在一起的弧线图图6-12 arcTo方法绘制圆弧示意图方法绘制圆弧示意图6.4 绘制颜色渐变的图形1绘制线性渐变绘制线性渐变 绘制线性渐变，需要使用到绘制线性渐变，需要使用到LinearGradient对象。使用绘图上下文对对象。使用绘图上下文对象的象的createLinearGradient()方法可以创建该对象方法可以创建该对象.ctx.createLinearGradient(xStart,yStart,xEnd,

11、yEnd);示例示例6-13（script13.js）绘制了线性渐变图形）绘制了线性渐变图形6.4 绘制颜色渐变的图形2绘制径向渐变绘制径向渐变使用绘图上下文对象的使用绘图上下文对象的createRadialGradient()方法绘制径向渐变方法绘制径向渐变.context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);示例示例6-14（script14.js）绘制了径向渐变图形）绘制了径向渐变图形。6.5 使用坐标变换和矩阵变换绘图使用坐标变换和矩阵变换绘图1canvas的坐标系统的坐标系统 Canv

12、as API使用二维坐标系统，画布的左上角对应于坐标原点（使用二维坐标系统，画布的左上角对应于坐标原点（0,0），向右和向下分别为），向右和向下分别为X轴和轴和Y轴，轴，X轴向右为正，轴向右为正，Y轴向下为正，以一个像轴向下为正，以一个像素为一个坐标单位进行绘制。图素为一个坐标单位进行绘制。图6-16是默认的坐标系统。是默认的坐标系统。6.5 使用坐标变换和矩阵变换绘图使用坐标变换和矩阵变换绘图2坐标变换坐标变换 绘制图形时，如果需要旋转图形，或者对图形进行变形处理，使用绘制图形时，如果需要旋转图形，或者对图形进行变形处理，使用Canvas API的坐标变换就可以实现这些效果。对坐标的变换处理

13、有平移、的坐标变换就可以实现这些效果。对坐标的变换处理有平移、缩放和旋转缩放和旋转3种方式。种方式。（1）平移）平移Canvas API的的translate()实现平移，实现平移，方法定义如下方法定义如下：ctx.translate(x,y);（2）缩放）缩放Canvas API的的scale()方法可以方法可以实现实现缩小或放大，方法定义如下缩小或放大，方法定义如下：ctx.scale(x,y);（3）旋转）旋转Canvas API的的的的rotate()方法可以旋转图形，方法定义如下方法可以旋转图形，方法定义如下：ctx.rotate(angle);6.5 使用坐标变换和矩阵变换绘图使用

14、坐标变换和矩阵变换绘图script15.js中使用坐标变换方法绘制了一组变形图形。中使用坐标变换方法绘制了一组变形图形。6.5 使用坐标变换和矩阵变换绘图使用坐标变换和矩阵变换绘图3使用路径绘制图形的坐标变换使用路径绘制图形的坐标变换使用坐标变换方法对矩形这样的基本形状的做变形处理比较方便。解决问题使用坐标变换方法对矩形这样的基本形状的做变形处理比较方便。解决问题的办法是，先写一个创建路径的函数，然后在坐标变换时调用该函数。示例的办法是，先写一个创建路径的函数，然后在坐标变换时调用该函数。示例6-16（script16.js）将坐标变换与路径结合使用）将坐标变换与路径结合使用。6.5 使用坐标

15、变换和矩阵变换绘图使用坐标变换和矩阵变换绘图4矩阵变换矩阵变换 矩阵变换可以实现比坐标变换更加复矩阵变换可以实现比坐标变换更加复杂的图形变换。杂的图形变换。（1）使用使用transform()方法实现图方法实现图形变换形变换使用绘图上下文对象的使用绘图上下文对象的transform()方法修改变换矩阵，定义如下。方法修改变换矩阵，定义如下。ctx.transform(a,b,c,d,dx,dy)v a，b，c，d参数用来指定参数用来指定如何变形如何变形v dx，dy参数用来移动坐标参数用来移动坐标原点。原点。v a和和d分别表示水平旋转（分别表示水平旋转（缩放）和垂直旋转或（缩放缩放）和垂直旋

16、转或（缩放）的倍数值，默认为）的倍数值，默认为1;v b和和c分别表示水平倾斜和分别表示水平倾斜和垂直倾斜的量，取值从垂直倾斜的量，取值从-1到到1;v dx和和dy表示将坐标原点水表示将坐标原点水平方向和垂直方向位移的距平方向和垂直方向位移的距离，单位默认为像素。离，单位默认为像素。6.5 使用坐标变换和矩阵变换绘图使用坐标变换和矩阵变换绘图示例示例6-17给出了使用变换矩阵进行图形变形的示例给出了使用变换矩阵进行图形变形的示例。6.5 使用坐标变换和矩阵变换绘图使用坐标变换和矩阵变换绘图（2）使用使用setTransform()方法实现图形变换方法实现图形变换setTransform()方

17、法用来重置变换矩阵。该方法的定义如下。方法用来重置变换矩阵。该方法的定义如下。context.setTransform(a,b,c,d,x,y)示例示例6-18实现一个了文字的倒影效果。实现一个了文字的倒影效果。6.6 在在canvas中使用图像中使用图像1绘制图像绘制图像 Canvas API可以读取本地或网络上的图像文件，然后将该图像绘制在可以读取本地或网络上的图像文件，然后将该图像绘制在画布中，这主要是通过画布中，这主要是通过drawImage()方法实现的。方法实现的。（1）drawImage()方法方法drawImage()方法由绘图上下文方法由绘图上下文ctx调用，该方法定义有三种

18、形式调用，该方法定义有三种形式.ctx.drawImage(image,x,y);ctx.drawImage(image,x,y,w,h);ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);6.6 在在canvas中使用图像中使用图像(2)ctx绘制图像的步骤绘制图像的步骤v创建创建Image对象对象使用不带参数的使用不带参数的new 方法创建方法创建Image对象，然后在该对象，然后在该Image对象的对象的src属性中指定需要绘制的图像文件的路径，具体代码如下。属性中指定需要绘制的图像文件的路径，具体代码如下。image=new Image();im

19、age.src=“images/tu1.jpg”;/设置图像路径和文件名设置图像路径和文件名v在在Image对象的对象的onload事件中同步执行绘制图像的方法事件中同步执行绘制图像的方法创建创建Image对象后，就可以通过对象后，就可以通过drawImage()方法绘制该图像文件了方法绘制该图像文件了,代码如下代码如下:image.onload=function()/绘制图像绘制图像 6.6 在在canvas中使用图像中使用图像(3)绘制图像的示例绘制图像的示例示例示例6-19给出了在画布上绘制一个简单的图像给出了在画布上绘制一个简单的图像6.6 在在canvas中使用图像中使用图像2图像平

20、铺图像平铺 在在HTML5中使用绘图上下文对象的中使用绘图上下文对象的createPattern()方法来实现平铺方法来实现平铺非常容易，非常容易，createPattern方法的定义如下。方法的定义如下。context.createPattern(image,type);该方法需要定义该方法需要定义2个参数，个参数，image参数为要平铺的图像，参数为要平铺的图像，type参数必须参数必须取下面字符串值之一。取下面字符串值之一。no-repeat：不平铺：不平铺 repeat-x：横向平铺：横向平铺 repeat-y：纵向平铺：纵向平铺 repeat：全方向平铺：全方向平铺6.6 在在can

21、vas中使用图像中使用图像示例示例6-20实现图片的重复填充，执行效果如图实现图片的重复填充，执行效果如图6-22所示。所示。6.6 在在canvas中使用图像中使用图像3图像裁剪图像裁剪示例示例6-21实现了图像裁剪功能。实现了图像裁剪功能。6.7 绘制文字1绘制文字的方法绘制文字的方法 绘制文字时可以主要使用绘制文字时可以主要使用filltext()方法或方法或strokeText()方法。方法。fillText()方法用填充方式绘制文本，方法用填充方式绘制文本，strokeText()方法用轮廓方式绘制文本，这两个方法的格式定义如下。方法用轮廓方式绘制文本，这两个方法的格式定义如下。vo

22、id fillText(text,x,y,maxwidth);void strokeText(text,x,y,maxwidth);2.绘制文字的属性绘制文字的属性 使用使用canvas API绘制文字，可以设置有关文字绘制的属性绘制文字，可以设置有关文字绘制的属性。6.7 绘制文字示例示例6-22分别绘制实心文字、空心文字和图片填充文字。分别绘制实心文字、空心文字和图片填充文字。6.8 使用canvas绘制动画1、绘制动画的步骤绘制动画的步骤 在在canvas画布中绘制动画实际上就是一个图形不断绘制、画布中绘制动画实际上就是一个图形不断绘制、擦除、重绘的过程，具体步骤如下。擦除、重绘的过程，

23、具体步骤如下。（1）编写绘图方法）编写绘图方法（2）使用）使用setInterval()方法设置画面重绘的间隔时间方法设置画面重绘的间隔时间 setInterval()语法格式如下语法格式如下：setInterval(function,interval);（3）保存与恢复绘图上下文的当前状态）保存与恢复绘图上下文的当前状态6.8 使用canvas绘制动画2、绘制动画的示例绘制动画的示例（1）矩形渐进的简单动画）矩形渐进的简单动画示例示例6-23给出一个简单的给出一个简单的动画动画6.8 使用canvas绘制动画2、绘制动画的示例绘制动画的示例（2）时钟运行动画时钟运行动画示例示例6-24给出一个比较复杂的时钟运行动画给出一个比较复杂的时钟运行动画6.8 使用canvas绘制动画（3）绘制时针、分钟和秒针）绘制时针、分钟和秒针（4）执行）执行setInterval(clock,1000)方法，每隔方法，每隔1秒钟执行秒钟执行1次次clock方法，清除画布后重画。方法，清除画布后重画。作业 绘制如图6-28所示的星空效果，其中黑色矩形宽800像素、高400像素，在矩形范围内绘制200颗大小、位置、角度随机的黄色五角星。