07单元7网页图形绘制与游戏设计.docx
《07单元7网页图形绘制与游戏设计.docx》由会员分享，可在线阅读，更多相关《07单元7网页图形绘制与游戏设计.docx（11页珍藏版）》请在冰豆网上搜索。
07单元7网页图形绘制与游戏设计
单元7 网页图形绘制与游戏设计
本单元通过网页图形绘制与游戏设计的探析与训练，重点学习HTML5中的
【教学导航】
教学目标
（1）了解阴影效果和颜色渐变效果的设置方法
（2）掌握HTML5中的
（3）熟悉HTML5中的画布与画笔、坐标与路径
（4）熟悉各种网页图形的绘制和图片的绘制
（5）学会应用
关键字
网页图形绘制 游戏设计
参考资料
（1）HTML5的常用标签及其属性、方法与事件参考附录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中菊花图形绘制的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所示。
【知识疏理】
1．HTML5的
画布是一个矩形区域，可以控制其每一像素。
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2．HTML5的画布与画笔
（1）画布
Canvas意为画布也，而Html5中的Canvas也真的跟现实生活中的画布非常相似，所以，把他看成一块实实在在的画布可以方便理解。
用canvas作画，首先，需要有一块“画布”，即创建一个canvas即可。
（2）画笔
创建好了画布后，让我们来准备画笔，创建context对象，使用getContext（）方法从画布中得到二维绘制对象的代码如下：
varcontext=myCanvas.getContext（"2d"）;
getContext（"2d"）对象是HTML5的内建对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，在JavaScript中通过操作它即可以在Canvas画布中绘制所需的图形。
3．HTML5的坐标与路径
（1）坐标
2d世界就是平面，在一个平面上确定一个点，需要两个值：
x坐标和y坐标。
canvas的原点是左上角，跟flash一样。
上面的fillRect方法拥有参数（0,0,80,100），意思是在画布上绘制80×100的矩形，从左上角开始（0,0）。
如图7-3所示，画布的X和Y坐标用于在画布上对绘画进行定位。
图7-3 HTML5图形绘制的坐标与原点
（2）路径
在Canvas中，所有基本图形都是以路径为基础的，通常使用Context对象的moveTo（）、lineTo（）、rect（）、arc（）等方法先在画布中描出图形的路径点，然后使用fill（）或者stroke（）方法依照路径点来填充图形或者绘制线条。
①开始与关闭：
beginPath、closePath
beginPath（）：
开始绘制一个新路径。
closePath（）：
通过绘制一条当前点到路径起点的线段来闭合形状。
这两个方法分别用来通知Context开始一个新的路径和关闭当前的路径。
②移动与直线：
moveTo、lineTo,rect
voidmoveTo（infloatx,infloaty）;
moveTo方法用于显式地指定路径的起点。
默认状态下，第一条路径的起点是画布的（0,0）点，之后的起点是上一条路径的终点。
两个参数分为表示起点的x、y坐标值。
③曲线：
arcTo、arc、quadraticCurveTo、bezierCurveTo
voidarcTo（infloatx1,infloaty1,infloatx2,infloaty2,infloatradius）;
arcTo方法用于绘制一个与两条线段相切的圆弧，两条线段分别以当前Context绘制起点和（x2,y2）点为起点，都以（x1,y1）点为终点，圆弧的半径为radius。
绘制完成后绘制起点会移动到以（x2,y2）为起点的线段与圆弧的切点。
voidarc（infloatx,infloaty,infloatradius,infloatstartAngle,infloatendAngle,inbooleananticlockwise）;
arc方法用于绘制一个以（x,y）点为圆心，radius为半径，startAngle为起始弧度，endAngle为终止弧度的圆弧。
参数中的两个弧度以0表示0°，位置在3点钟方向；Math.PI值表示180°，位置在9点钟方向。
④fill、stroke、clip
路径绘制完成后，需要调用Context对象的fill（）和stroke（）方法来填充路径和绘制路径线条，或者调用clip（）方法来剪辑Canvas区域。
⑤clearRect、fillRect、strokeRect
这三个方法并不是路径方法，而是用来直接处理Canvas上的内容，相当于Canvas的背景，调用这三个方法也不会影响Context绘图的起点。
4．图形绘制的风格设置属性
Context对象还提供了相应的属性来调整线条及填充风格，如表7-6所示。
5．绘制矩形
Context对象拥有3个方法可以直接在画布上绘制图形而不需要路径，可以将其视为直接在画布背景中绘制。
这3个方法的原型如下：
（1）voidfillRect（left,top,width,height）;
用于使用当前的fillStyle（默认为“#000000”，黑色）样式填充一个左上角顶点在（left,top）点、宽为width、高为height的矩形。
（2）voidstrokeRect（left,top,width,height）;
用于使用当前的线条风格绘制一个左上角顶点在（left,top）点、宽为width、高为height的矩形边框。
（3）voidclearRect（left,top,width,height）;
用于清除左上角顶点在（left,top）点、宽为width、高为height的矩形区域内的所有内容。
6．绘制任意形状
在简单的矩形不能满足需求的情况下，绘图环境提供了通过canvas路径（path）绘制复杂的形状或路径的方法。
可以先绘制轮廓，然后绘制边框和填充。
使用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）处绘制带fillStyle填充的实心文本。
两者的参数相同：
要绘制的文字和文字的位置（x,y）坐标。
还有一个可选选项——最大宽度。
如果需要的话，浏览器会缩减文字以让它适应指定宽度。
文字对齐属性影响文字与设置的（x,y）坐标的相对位置。
8．设置阴影效果
ShadowsAPI的属性为：
①shadowColor：
用于设置阴影颜色，其值和CSS颜色值一致。
②shadowBlur：
用于设置阴影模糊程度，此值越大，阴影越模糊。
其效果和Photoshop的高斯模糊滤镜相同。
③shadowOffsetX和shadowOffsetY：
用于设置阴影的x和y偏移量，单位是像素。
9．设置颜色渐变
除了CSS颜色，fillStyle和strokeStyle属性可以设置为CanvasGradient对象，通过CanvasGradient可以为线条和填充使用颜色渐变。
若创建CanvasGradient对象，可以使用createLinearGradient和createRadialGradient两个方法。
前者创建线性颜色渐变，后者创建圆形颜色渐变。
创建颜色渐变对象后，可以使用对象的addColorStop方法添加颜色中间值。
10．绘制图片
Context对象中拥有drawImage（）方法可以将外部图片绘制到Canvas中。
drawImage（）方法的3种原型如下：
①drawImage（image,dx,dy）;
②drawImage（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本身的宽和高。
11．SVG
（1）使用SVG图像的优势
与其他图像格式相比（例如JPEG和GIF），使用SVG的优势在于：
①SVG图像可通过文本编辑器来创建和修改。
②SVG图像可被搜索、索引、脚本化或压缩。
③SVG图像是可伸缩的。
④SVG图像可在任何的分辨率下被高质量地打印。
⑤SVG可在图像质量不下降的情况下被放大。
在HTML5中，可以将SVG元素直接嵌入HTML页面中，示例代码如下：
DOCTYPEhtml>
//www.w3.org/2000/svg"version="1.1"height="190">
style="fill:
lime;stroke:
purple;stroke-width:
5;fill-rule:
evenodd;"/>
（2）
Canvas和SVG都允许在浏览器中创建图形，但是它们在根本上是不同的。
SVG是一种使用XML描述2D图形的语言，SVG基于XML，这意味着SVGDOM中的每个元素都是可用的，可以为某个元素附加JavaScript事件处理器。
在SVG中，每个被绘制的图形均被视为对象。
如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。
【引导训练】
【任务7-3】网页中绘制各种图形和文字
【任务描述】
（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所示。
保存网页070301.html，在浏览器GoogleChrome中的浏览效果如图7-5所示。
（2）绘制多个长方形
在本地硬盘的文件夹“07网页图形操作与游戏设计\0703”中创建网页070302.html。
在网页070302.html中编写HTML代码及相关的javascript绘制多个长方形，代码如表7-8所示。
保存网页070302.html，在浏览器GoogleChrome中的浏览效果如图7-6所示。
（3）绘制多个不同形状的图形
在本地硬盘的文件夹“07网页图形操作与游戏设计\0703”中创建网页070303.html。
在网页070303.html中编写HTML代码及相关的javascript绘制多个不同形状的图形，代码如表7-9所示。
保存网页070303.html，在浏览器GoogleChrome中的浏览效果如图7-7所示。
（4）绘制多个不同大小和字体的文字
在本地硬盘的文件夹“07网页图形操作与游戏设计\0703”中创建网页070304.html。
在网页070304.html中编写HTML代码及相关的javascript绘制多个不同大小和字体的文字，代码如表7-10所示。
保存网页070304.html，在浏览器GoogleChrome中的浏览效果如图7-8所示。
（5）绘制图片
在本地硬盘的文件夹“07网页图形操作与游戏设计\0703”中创建网页070305.html。
在网页070305.html中编写HTML代码及相关的javascript绘制图片，代码如表7-11所示。
保存网页070305.html，在浏览器GoogleChrome中的浏览效果如图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代码
网页0704.html中实现俄罗斯方块游戏功能的JavaScript代码如表7-13所示。
保存网页0704.html，在浏览器GoogleChrome中的浏览该网页，单击【开始】即可开始试玩俄罗斯方块游戏，单击【暂停】按钮即可暂停俄罗斯方块游戏，单击【继续】按钮即可继续玩游戏，网页俄罗斯方块游戏的一次试玩效果如图7-10所示。
【同步训练】
【任务7-5】网页中绘制多种图形和图片
【任务描述】
（1）在网页中绘制如图7-11至图7-12所示的各种图形。
图7-11 网页中绘制多个实心和空心方形的浏览效果
图7-12 网页中绘制圆和弧的浏览效果
（2）在网页中绘制图7-13所示的各种图片
图7-13 网页中绘制图片的浏览效果
【任务实施】
（1）绘制多个实心和空心方形
在本地硬盘的文件夹“07网页图形操作与游戏设计\0705”中创建网页070501.html。
在网页070501.html中编写HTML代码及相关的javascript绘制多个实心和空心方形，代码如表7-14所示。
保存网页070501.html，在浏览器GoogleChrome中的浏览效果如图7-11所示。
（2）绘制圆和弧
在本地硬盘的文件夹“07网页图形操作与游戏设计\0705”中创建网页070502.html。
在网页070502.html中编写HTML代码及相关的javascript绘制圆和弧，代码如表7-15所示。
保存网页070502.html，在浏览器GoogleChrome中的浏览效果如图7-12所示。
（3）绘制图片
在本地硬盘的文件夹“07网页图形操作与游戏设计\0705”中创建网页070503.html。
在网页070503.html中编写HTML代码及相关的javascript绘制图片，代码如表7-16所示。
保存网页070503.html，在浏览器GoogleChrome中的浏览效果如图7-13所示。
【拓展训练】
【任务7-6】网页中绘制多个五角星
【任务描述】
网页0706.html中绘制多个五角星的浏览效果如图7-14所示。
图7-14 网页0706.html中绘制多个五角星的浏览效果
【任务7-7】设计html5版连连看网页游戏
【任务描述】
连连看网页游戏的一次试玩效果如图7-15所示。
图7-15 连连看网页游戏的一次试玩效果
【单元小结】
本单元通过网页图形绘制与游戏设计的探析与训练，重点熟悉了HTML5中的
升级会员 