第06章 课件的制作与实现.ppt

6.5 移动课件制作技术—HTML5 6.5.8 在HTML5中绘图 下一页 上一页 结 束 图6-55 矩形框效果 绘制效果如图6-55所示。 6.5 移动课件制作技术—HTML5 6.5.8 在HTML5中绘图 1.canvas元素绘图 （2）绘制线条脚本 通过指定从何处开始，在何处结束，来绘制线条，JavaScript 代码如下： script type=text/javascript var c=document.getElementById(myCanvas); var cxt=c.getContext(2d); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); /script 下一页 上一页 结 束 6.5 移动课件制作技术—HTML5 6.5.8 在HTML5中绘图 1.canvas元素绘图 （2）绘制线条脚本 canvas 元素： canvas id=myCanvas width=400 height=200 style=border:1px solid #c0c0c0; 您的浏览器不支持canvas元素。 /canvas 绘制效果如图6-56所示。 下一页 上一页 结 束 图6-56 线条效果 6.5 移动课件制作技术—HTML5 6.5.8 在HTML5中绘图 1.canvas元素绘图 （3）绘制圆形脚本 通过规定尺寸、颜色和位置，来绘制圆形，JavaScript 代码如下： script type=text/javascript var c=document.getElementById(myCanvas); var cxt=c.getContext(2d); cxt.fillStyle=#FF0000; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); /script 下一页 上一页 结 束 6.5 移动课件制作技术—HTML5 6.5.8 在HTML5中绘图 下一页 上一页 结 束 图6-57 圆形效果 1.canvas元素绘图 （3）绘制圆形脚本 canvas 元素调用参照上例，绘制效果如图6-57所示。 6.5 移动课件制作技术—HTML5 6.5.8 在HTML5中绘图 2. SVG元素绘图 SVG含义为可伸缩矢量图形 (Scalable Vector Graphics)，用来定义用于网络的基于矢量的图形，使用XML格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失。使用SVG的示例如下： svg xmlns=/2000/svg version=1.1 height=190 polygon points=100,10 40,180 190,60 10,60 160,180 style=fill:lime;stroke:purple;stroke-width:6;fill-rule:evenodd; / /svg 下一页 上一页 结 束 6.5 移动课件制作技术—HTML5 6.5.8 在HTML5中绘图 下一页 上一页 结 束 图6-58 SVG绘制五角星效果 2. SVG元素绘图 上例在网页中效果如图6-58所示。 6.5 移动课件制作技术—HTML5 6.5.9 一个简单的移动课件示例 下面应用上述HTML5技术制作初中语文课本中《荷塘月色》的移动课件，图片和文字横向轮播切换功能代码，响应式设计（页面的设计与开发应当根据用户行为以及设备环境如：系统平台、屏幕尺寸、屏幕定向等进行相应的响应和调整），自适应分辨率，图片放大缩小，播放背景音乐。 下一页 上一页 结 束 6.5 移动课件制作技术—HTML5 6.5.9 一个简单的移动课件示例 下一页 上一页 结 束 图6-59 案例预览效果 手机上预览效果如图6-59所示。 习题与思考题 下一页 上一页 结 束 1．常用的写作工具有哪些？分别简述其主要功能。 2．如何评价与选用一个开发工具？ 3．如何插入/删除幻灯片？ 4．要想在一个没有安装Powerpoint的计算机上放映幻灯片，应如何保存幻灯片？ 5．如何设置自动放映幻灯片和自定义放映？ 6．如何插入录制声音文件？ 7．如何设置切换或动画效果？