JavaScript程序设计案例教程第2版许旻配套教学课件PPT第9章.ppt

4、etacharset="utf-8">2)新增语义化标记，使文档结构明确3)form表单增强功能4)实现2D绘图的Canvas对象5)无需插件支持的视频/音频6)离线应用缓存7)可编辑内容、拖放9.1知识准备【实例9-1】HTML5文档结构应用。实例要求使用HTML5语法改写【实例2-8】中的页面结构。9.1知识准备图9.2使用HTML5编写的页面图知识点2使用JavaScript绘制图形JavaScript通过调用HTML5中的canvas元素来实现绘制图形和动画功能。1)创建canvas元素标记是HTML的新元素，它是一个矩形区域，包含w

5、idth和height两个属性，这两个属性是可选的，并可以像其它标记一样应用CSS样式表。canvas在网页中常用形式如下：9.1知识准备你的浏览器不支持canvas知识点2使用JavaScript绘制图形2)使用JavaScript实现绘图的流程画布canvas本身不具有绘制图形的功能，只是一个容器，所有的绘制工作需在JavaScript内部完成。使用canvas结合JavaScript绘制

6、图形，一般有以下步骤。(1)使用document对象的getElementById()方法获取页面中的画布canvas对象。(2)创建二维的绘图上下文对象(3)绘制图形9.1知识准备varcanvas=document.getElementById("mycanvas");varcontext=canvas.getContext(“2d”);context.fillStyle="#ffdd00";context.fillRect(0,0,150,150);知识点2使用JavaScript绘制图形3)绘图API提供的属性和方法(1)设置颜色、样式和阴影。(2)

7、绘制矩形。(3)绘制路径。(4)绘制图像。(5)像素操作。(6)绘制渐变图形。(7)绘制变换图片。(8)绘制文本。(9)图形组合，即把一个图像绘制在另一个图形之上。(10)图形的保存与恢复。9.1知识准备【实例9-2】使用canvas元素绘制图形。实例效果：画面中有一个棒棒糖人，由脸和上半身躯组成，脸是圆形，其中包括带线性渐变的矩形眼睛和笑状弧形嘴巴，身躯由三条直线组成。初始状态手向上，鼠标移入画布时手向下，鼠标移出后恢复初始状态。9.1知识准备图9.3棒棒糖人初始状态图9.4鼠标移入画布时状态图本案例主要实现学习风采照片墙效果：在页面内摆放15张照片，每张

8、照片都有不同程度的旋转，并指定旋转的原点，其中有几张