JavaScript程序设计案例教程（第2版）第9章HTML5+CSS3技术.ppt

JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 HTML5和CSS3代表了下一代的HTML和CSS技术，JavaScript语言作为目前流行的脚本语言，与HTML5密不可分，HTML5中的核心功能基本都要JavaScript语言的支持。CSS3可以设置网页上的样式和布局，增加网页静态特效，将JavaScript和CSS3结合可以创建出大量的动态特效。使用HTML5+CSS3+JavaScript技术构建网页，使网页样式布局更标准、样式更美化。 知识目标 了解HTML5和CSS3的新功能 熟悉HTML5中的Canvas元素 熟悉CSS3中的媒体查询功能 熟悉JavaScript常用插件的使用 能力目标 能够熟练HTML5和CSS3的新功能编写并美化网页 能够熟练使用JavaScript和Canvas绘制图形 能够熟练使用CSS3中的媒体查询功能使网页自适应布局 能够在HTML中插入JavaScript常用插件实现浏览器兼容问题 4 案例陈述 1 2 3 案例实施 知识准备 本章小结 5 课后习题 5 本案例使用HTML5中的canvas画布和Javascript技术在首页中绘制指针式动态时钟，效果如图9.1所示。 图9.1 指针式动态时钟效果图 1)使用Dreamweaver将网页“Case17.html”另存为网页“Case19.html”，将画布代码添加到网页代码div class=leftBottom…/div中。 2)在head中script…/script添加绘制动态时钟代码。 div class=leftBottom canvas id=myCanvas width=150px height=150 style=border:1px solid #ccc;margin:20px 60px;你的浏览器不支持canvas/canvas /div 知识点1 HTML5新功能 1)简化的文档类型和字符编码 !doctype html meta charset=utf-8 2)新增语义化标记，使文档结构明确 3)form表单增强功能 4)实现2D绘图的Canvas对象 5)无需插件支持的视频/音频 6)离线应用缓存 7)可编辑内容、拖放 【实例9-1】HTML5文档结构应用。 实例要求使用HTML5语法改写【实例2-8】中的页面结构。 图9.2 使用HTML5编写的页面图 知识点2 使用JavaScript绘制图形 JavaScript通过调用HTML5中的canvas元素来实现绘制图形和动画功能。 1)创建canvas元素 canvas标记是HTML的新元素，它是一个矩形区域，包含width和height两个属性，这两个属性是可选的，并可以像其它标记一样应用CSS样式表。canvas在网页中常用形式如下： canvas id=mycanvas width=300px height=300px style=border:1px solid #ccc 你的浏览器不支持canvas/canvas 知识点2 使用JavaScript绘制图形 2)使用JavaScript实现绘图的流程 画布canvas本身不具有绘制图形的功能，只是一个容器，所有的绘制工作需在JavaScript内部完成。使用canvas结合JavaScript绘制图形，一般有以下步骤。 (1)使用document对象的getElementById()方法获取页面中的画布canvas对象。 (2)创建二维的绘图上下文对象 (3)绘制图形 var canvas = document.getElementById(mycanvas); var context = canvas.getContext(“2d”); context.fillStyle=#ffdd00; context.fillRect(0,0,150,150); 知识点2 使用JavaScript绘制图形 3)绘图API提供的属性和方法 (1)设置颜色、样式和阴影。 (2)绘制矩形。 (3)绘制路径。 (4)绘制图像。 (5)像素操作。 (6)绘制渐变图形。 (7)绘制变换图片。 (8)绘制文本。 (9)图形组合，即把一个图像绘制在另一个图形之上。 (10)图形的保存与恢复。 【实例9-2】使用canvas元素绘制图形。 实例效果：画面中有一个棒棒糖人，由脸和上半身躯组成，脸是圆形，其中包括带线性渐变的矩形眼睛和笑状弧形嘴巴，身躯由三条直线组成。初始状态手向上，鼠标移入画布时手向下，鼠标移出后恢复初始状态。 图9.3 棒棒糖人初始状态 图9.4 鼠标移入画布时状态图