07单元7网页图形绘制与游戏设计.docx

1、07单元7网页图形绘制与游戏设计单元7网页图形绘制与游戏设计本单元通过网页图形绘制与游戏设计的探析与训练，重点学习HTML5中的标签、画布与画笔、坐标与路径、各种网页图形的绘制、图片的绘制、阴影效果和颜色渐变效果的设置等，学会应用标签以及相关属性和方法进行网页图形绘制与游戏设计。【教学导航】教学目标（1）了解阴影效果和颜色渐变效果的设置方法（2）掌握HTML5中的标签（3）熟悉HTML5中的画布与画笔、坐标与路径（4）熟悉各种网页图形的绘制和图片的绘制（5）学会应用标签以及相关属性和方法进行网页图形绘制与游戏设计关 键 字网页图形绘制游戏设计标签画布与画笔图片的绘制参考资料（1）HTML5的常

2、用标签及其属性、方法与事件参考附录B（2）CSS的属性参考附录C（3）CSS的各种选择器的含义和用法参考附录D教学方法任务驱动法、分组讨论法、理论实践一体化、探究学习法课时建议8课时【实例探析】【任务7-1】探析网页中菊花图形的绘制【效果展示】网页0701.html中绘制菊花图形的浏览效果如图7-1所示。图7-1网页0701.html中绘制菊花图形的浏览效果【网页探析】1网页0701.html中菊花图形绘制的HTML代码探析网页0701.html中菊花图形绘制的HTML代码如表7-1所示。2网页0701.html中菊花图形绘制的JavaScript代码探析网页0701.html中菊花图形绘制的

3、JavaScript代码如表7-2所示。【任务7-2】探析网页中精美挂钟的绘制【效果展示】网页0702.html中精美挂钟的浏览效果如图7-2所示。图7-2网页0702.html中精美挂钟的浏览效果【网页探析】1网页0702.html中精美挂钟绘制的HTML代码探析网页0702.html中精美挂钟绘制的HTML代码如表7-3所示。2网页0702.html中精美挂钟绘制的JavaScript代码探析网页0702.html中精美挂钟绘制的JavaScript代码如表7-4所示。【知识疏理】1HTML5的标签标签用于在网页上绘制图形。标签只是定义图形容器（画布），必须使用JavaScript在网页上

4、绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。2HTML5的画布与画笔（1）画布Canvas意为画布也，而Html5中的Canvas也真的跟现实生活中的画布非常相似，所以，把他看成一块实实在在的画布可以方便理解。用canvas作画，首先，需要有一块“画布”，即创建一个canvas即可。（2）画笔创建好了画布后，让我们来准备画笔，创建context对象，使用getContext()方法从画布中得到二维绘制对象的代码如下：var context = myCanvas.getContext(2d); getContext(2d)对

5、象是HTML5的内建对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，在JavaScript中通过操作它即可以在Canvas画布中绘制所需的图形。3HTML5的坐标与路径（1）坐标2d世界就是平面，在一个平面上确定一个点，需要两个值：x坐标和y坐标。canvas的原点是左上角，跟flash一样。上面的fillRect方法拥有参数 (0,0,80,100)，意思是在画布上绘制80100的矩形，从左上角开始(0,0)。如图7-3所示，画布的X和Y坐标用于在画布上对绘画进行定位。图7-3HTML5图形绘制的坐标与原点（2）路径在Canvas中，所有基本图形都是以路径为基础的，通常使用Con

6、text对象的moveTo()、lineTo()、rect()、arc()等方法先在画布中描出图形的路径点，然后使用fill()或者stroke()方法依照路径点来填充图形或者绘制线条。 开始与关闭：beginPath、closePathbeginPath()：开始绘制一个新路径。closePath()：通过绘制一条当前点到路径起点的线段来闭合形状。这两个方法分别用来通知Context开始一个新的路径和关闭当前的路径。 移动与直线：moveTo、lineTo, rectvoid moveTo(in float x, in float y);moveTo方法用于显式地指定路径的起点。默认状态下，

7、第一条路径的起点是画布的(0, 0)点，之后的起点是上一条路径的终点。两个参数分为表示起点的x、y坐标值。 曲线：arcTo、arc、quadraticCurveTo、bezierCurveTovoid arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);arcTo方法用于绘制一个与两条线段相切的圆弧，两条线段分别以当前Context绘制起点和(x2, y2)点为起点，都以(x1, y1)点为终点，圆弧的半径为radius。绘制完成后绘制起点会移动到以(x2, y2)为起点的线段与圆弧的切点。vo

8、id arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);arc方法用于绘制一个以(x, y)点为圆心，radius为半径，startAngle为起始弧度，endAngle为终止弧度的圆弧。参数中的两个弧度以0表示0，位置在3点钟方向；Math.PI值表示180，位置在9点钟方向。 fill、stroke、clip路径绘制完成后，需要调用Context对象的fill()和stroke()方法来填充路径和绘制路径线条，或者调用c

9、lip()方法来剪辑Canvas区域。 clearRect、fillRect、strokeRect这三个方法并不是路径方法，而是用来直接处理Canvas上的内容，相当于Canvas的背景，调用这三个方法也不会影响Context绘图的起点。4图形绘制的风格设置属性Context对象还提供了相应的属性来调整线条及填充风格，如表7-6所示。5绘制矩形Context对象拥有3个方法可以直接在画布上绘制图形而不需要路径，可以将其视为直接在画布背景中绘制。这3个方法的原型如下：（1）void fillRect(left, top,width, height);用于使用当前的fillStyle（默认为“#0

10、00000”，黑色）样式填充一个左上角顶点在（left, top）点、宽为width、高为height的矩形。（2）void strokeRect(left, top,width, height);用于使用当前的线条风格绘制一个左上角顶点在(left, top)点、宽为width、高为height的矩形边框。（3）void clearRect(left, top,width, height);用于清除左上角顶点在(left,top)点、宽为width、高为height的矩形区域内的所有内容。6绘制任意形状在简单的矩形不能满足需求的情况下，绘图环境提供了通过canvas路径（path）绘制复杂的

11、形状或路径的方法。可以先绘制轮廓，然后绘制边框和填充。使用beginPath()方法开始绘制路径，然后使用moveTo()、lineTo()、arc()方法创建线段。绘制完毕使用stroke()或fill()即可添加填充或者设置边框。使用fill()会自动闭合所有未闭合路径。使用closePath()结束绘制并闭合形状（可选）。 7绘制文字在绘图环境中提供了两种方法在canvas中绘制文字。（1）strokeText(text,x,y,maxWidth)在(x,y)处绘制只有strokeStyle边框的空心文本。（2）fillText(text,x,y,maxWidth)在(x,y)处绘制带f

12、illStyle填充的实心文本。两者的参数相同：要绘制的文字和文字的位置(x,y)坐标。还有一个可选选项最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。文字对齐属性影响文字与设置的(x,y) 坐标的相对位置。8设置阴影效果Shadows API的属性为： shadowColor：用于设置阴影颜色，其值和CSS颜色值一致。 shadowBlur：用于设置阴影模糊程度，此值越大，阴影越模糊。其效果和Photoshop的高斯模糊滤镜相同。 shadowOffsetX和shadowOffsetY：用于设置阴影的x和y偏移量，单位是像素。9设置颜色渐变除了CSS颜色，fillStyle和st

13、rokeStyle属性可以设置为CanvasGradient对象，通过CanvasGradient可以为线条和填充使用颜色渐变。若创建CanvasGradient对象，可以使用createLinearGradient和createRadialGradient两个方法。前者创建线性颜色渐变，后者创建圆形颜色渐变。创建颜色渐变对象后，可以使用对象的addColorStop方法添加颜色中间值。10绘制图片Context对象中拥有drawImage()方法可以将外部图片绘制到Canvas中。drawImage()方法的3种原型如下： drawImage(image, dx, dy); drawImag

14、e(image, dx, dy,dw, dh); drawImage(image, sx, sy,sw, sh, dx, dy, dw, dh);其中，image参数可以是HTMLImageElement、HTMLCanvasElement或者HTMLVideoElement。第3个方法原型中的sx、sy在前两个中均为0，sw、sh均为image本身的宽和高；第2和第3个原型中的dw、dh在第1个中也均为image本身的宽和高。11SVG（1）使用SVG图像的优势与其他图像格式相比（例如JPEG和GIF），使用SVG的优势在于： SVG图像可通过文本编辑器来创建和修改。 SVG图像可被搜索、索

15、引、脚本化或压缩。 SVG图像是可伸缩的。 SVG图像可在任何的分辨率下被高质量地打印。 SVG可在图像质量不下降的情况下被放大。在HTML5中，可以将SVG元素直接嵌入HTML页面中，示例代码如下： （2）标签和SVG以及VML之间的差异Canvas和SVG都允许在浏览器中创建图形，但是它们在根本上是不同的。SVG是一种使用XML描述2D图形的语言，SVG基于XML，这意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。【引导训练】【任务7-3】网页中

16、绘制各种图形和文字【任务描述】（1）在网页中绘制如图7-5至图7-7所示的各种图形。图7-5网页中绘制空心正方形的浏览效果图7-6网页中绘制多个长方形的浏览效果图7-7网页中绘制多个不同形状图形的浏览效果（2）在网页中绘制图7-8所示的各种文字。图7-8网页中绘制各种文字的浏览效果（3）在网页中绘制图7-9所示的各种图片图7-9网页中绘制各种图片的浏览效果【任务实施】（1）绘制一个空心正方形在本地硬盘的文件夹“07网页图形操作与游戏设计0703”中创建网页070301.html。在网页070301.html中编写HTML代码及相关的javascript绘制一个空心正方形，代码如表7-7所示。保

17、存网页070301.html，在浏览器Google Chrome中的浏览效果如图7-5所示。（2）绘制多个长方形在本地硬盘的文件夹“07网页图形操作与游戏设计0703”中创建网页070302.html。在网页070302.html中编写HTML代码及相关的javascript绘制多个长方形，代码如表7-8所示。保存网页070302.html，在浏览器Google Chrome中的浏览效果如图7-6所示。（3）绘制多个不同形状的图形在本地硬盘的文件夹“07网页图形操作与游戏设计0703”中创建网页070303.html。在网页070303.html中编写HTML代码及相关的javascript绘

18、制多个不同形状的图形，代码如表7-9所示。保存网页070303.html，在浏览器Google Chrome中的浏览效果如图7-7所示。（4）绘制多个不同大小和字体的文字在本地硬盘的文件夹“07网页图形操作与游戏设计0703”中创建网页070304.html。在网页070304.html中编写HTML代码及相关的javascript绘制多个不同大小和字体的文字，代码如表7-10所示。保存网页070304.html，在浏览器Google Chrome中的浏览效果如图7-8所示。（5）绘制图片在本地硬盘的文件夹“07网页图形操作与游戏设计0703”中创建网页070305.html。在网页07030

19、5.html中编写HTML代码及相关的javascript绘制图片，代码如表7-11所示。保存网页070305.html，在浏览器Google Chrome中的浏览效果如图7-9所示。【任务7-4】设计网页俄罗斯方块游戏【任务描述网页俄罗斯方块游戏的一次试玩效果如图7-10所示。图7-10网页俄罗斯方块游戏的一次试玩效果【网页探析】1编写网页0704.html的HTML代码在本地硬盘的文件夹“07网页图形操作与游戏设计0704”中创建网页0704.html。网页0704.html的HTML代码如表7-12所示。2在网页0704.html中编写实现俄罗斯方块游戏功能的JavaScript代码网页

20、0704.html中实现俄罗斯方块游戏功能的JavaScript代码如表7-13所示。保存网页0704.html，在浏览器Google Chrome中的浏览该网页，单击【开始】即可开始试玩俄罗斯方块游戏，单击【暂停】按钮即可暂停俄罗斯方块游戏，单击【继续】按钮即可继续玩游戏，网页俄罗斯方块游戏的一次试玩效果如图7-10所示。【同步训练】【任务7-5】网页中绘制多种图形和图片【任务描述】（1）在网页中绘制如图7-11至图7-12所示的各种图形。图7-11网页中绘制多个实心和空心方形的浏览效果图7-12网页中绘制圆和弧的浏览效果（2）在网页中绘制图7-13所示的各种图片图7-13网页中绘制图片的浏

21、览效果【任务实施】（1）绘制多个实心和空心方形在本地硬盘的文件夹“07网页图形操作与游戏设计0705”中创建网页070501.html。在网页070501.html中编写HTML代码及相关的javascript绘制多个实心和空心方形，代码如表7-14所示。保存网页070501.html，在浏览器Google Chrome中的浏览效果如图7-11所示。（2）绘制圆和弧在本地硬盘的文件夹“07网页图形操作与游戏设计0705”中创建网页070502.html。在网页070502.html中编写HTML代码及相关的javascript绘制圆和弧，代码如表7-15所示。保存网页070502.html，在

22、浏览器Google Chrome中的浏览效果如图7-12所示。（3）绘制图片在本地硬盘的文件夹“07网页图形操作与游戏设计0705”中创建网页070503.html。在网页070503.html中编写HTML代码及相关的javascript绘制图片，代码如表7-16所示。保存网页070503.html，在浏览器Google Chrome中的浏览效果如图7-13所示。【拓展训练】【任务7-6】网页中绘制多个五角星【任务描述】网页0706.html中绘制多个五角星的浏览效果如图7-14所示。图7-14网页0706.html中绘制多个五角星的浏览效果【任务7-7】设计html5版连连看网页游戏【任务描述】连连看网页游戏的一次试玩效果如图7-15所示。图7-15连连看网页游戏的一次试玩效果【单元小结】本单元通过网页图形绘制与游戏设计的探析与训练，重点熟悉了HTML5中的标签、画布与画笔、坐标与路径、各种网页图形的绘制、图片的绘制、阴影效果和颜色渐变效果的设置等，学会了应用标签以及相关属性和方法进行网页图形绘制与游戏设计的方法。