HTML5的图像及动画上机实践绘制时钟课件.ppt

《HTML5的图像及动画上机实践绘制时钟课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章HTML5的图像及动画5.1canvas元素5.3图形操作5.2使用路径画图5.4图像操作5.5canvas其他操作5.6制作动画5.7上机实践——绘制时钟5.7上机实践——绘制时钟5.7.1实践目的使用HTML5的canvas元素，绘制一个时钟。绘制过程中将综合应用本章的多个技术点，包括坐标变换、旋转，路径绘制线条、弧线，图形保存、恢复，动画应用，等等。通过本上机实践，读者能够熟练掌握HTML5中图形、图像的操作方法。5.7.2设计思路时钟的结构主要包括表盘、时针、分针、秒针几个主要部分，其中

2、表盘是固定不变的，时针、分针、秒针随着时间的变化其位置相应也发生改变。根据如上分析，我们设定设计步骤如下。（1）绘制表盘，包括时钟中心、外圈及刻度线。其中时钟中心和外圈通过绘制圆形实现，刻度线通过绘制矩形实现。（2）绘制时针、分针和秒针。（3）添加动画操作，使时针、分针以及秒针随时间变化改变位置。5.7.3实现过程根据上面的设计思路，我们设计代码如下。varslen=70;//定义秒针长度varmlen=65;//定义分针长度va

3、rhlen=45;//定义时针长度varls=0;varlm=0;varlh=0;functiondraw(){varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.beginPath();cxt.arc(200,150,4,0,2*Math.PI,true);//绘制表盘中心cxt.fill();cxt.closePath();cxt.beginPath();cxt.arc(200,150,100,0,2*Mat

4、h.PI,true);//绘制表盘外围cxt.stroke();cxt.closePath();cxt.beginPath();cxt.translate(200,150);//平移原点cxt.rotate(-Math.PI/2);cxt.save();for(vari=0;i<60;i++)//绘制矩形刻度线{if(i%5==0){cxt.fillRect(80,0,20,5);}else{cxt.fillRect(90,0,10,2);}cxt.rotate(Math.PI/30);//每绘制一个

5、刻度线旋转一次cxt.closePath();setInterval("Refresh();",1000);//每1秒钟调用refresh方法刷新时针、分针、秒针位置}functionRefresh(){varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.restore();cxt.save();cxt.rotate(ls*Math.PI/30);cxt.clearRect(5,-1,slen+1,4);//清除

6、秒针上次显示内容cxt.restore();cxt.save();cxt.rotate(lm*Math.PI/30);cxt.clearRect(5,-1,mlen+1,5);//清除分针上次显示内容cxt.restore();cxt.save();cxt.rotate(lh*Math.PI/6);cxt.clearRect(5,-3,hlen+1,6);//清除时针上次显示内容vartime=newDate();vars=ls=time.getSeconds();//获取当前时间（秒钟）varm=l

7、m=time.getMinutes();//获取当前时间（分钟）varh=lh=time.getHours();//获取当前时间（小时）cxt.restore();cxt.save();cxt.rotate(s*Math.PI/30);//根据秒钟数设置秒针位置cxt.fillRect(5,0,slen,2);//重新绘制秒针cxt.restore();cxt.save();cxt.rotate(m*Math.PI/30);//根据当前分钟数设置分针位置cxt.fillRect(5,0,mlen,3)

8、;//重新绘制分针cxt.restore();cxt.save();cxt.rotate(h*Math.PI/6);//根据当前小时数设置时针位置cxt.fillRect(5,-2,hlen,4);//重新绘制时针}