HTML5跨平台开发基础与实战 王寅峰电子任务11 使用Canvas设计动画.ppt

《HTML5跨平台开发基础与实战 王寅峰电子任务11 使用Canvas设计动画.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、跨平台HTML5实战软件学院王寅峰任务11使用Canvas设计动画学习目标【知识目标】掌握图片的变形方法；掌握图片组合方法；掌握基本动画制作。【技能目标】能设计动画。能使用Canvas绘制动画。引例描述使用Canvas不仅可以实现基本图形的绘制和基本图像处理，也支持图形样式设置、变形、组合等复杂操作，结合定时执行方法，可以实现动画效果。任务陈述本任务将使用Canvas实现在网页上绘制一个动态显示的在线时钟。1应用颜色、样式和绘制文字2变型的基本结构知识准备1应用颜色、样式和阴影1应用颜色、样

2、式和绘制文字（1）颜色functioninit(){draw();}functiondraw(){varc=document.getElementById("clock");//找到clock画布元素varctx=c.getContext("2d");//获取绘图对象ctx.fillStyle="red";ctx.arc(200,100,4

3、,0,Math.PI*2,true);//画圆ctx.fill();//填充路径}1应用颜色、样式和绘制文字（2）样式functiondraw(){varc=document.getElementById("clock");//找到clock画布元素varct

4、x=c.getContext("2d");//获取绘图对象ctx.fillStyle="red";ctx.arc(200,100,4,0,Math.PI*2,true);//画圆ctx.fill();//填充路径ctx.strokeStyle="red";//时针颜色为红色ctx.lineWidth=3;//时针宽度为3个像素pointer(ctx,200,200,160);//绘制时针}functionpointer(ctx,x,y,z){ctx.beginPath();ctx.moveTo(x,y

5、);ctx.lineTo(x,z);ctx.stroke();}1应用颜色、样式和绘制文字（3）绘制文字functiondraw(){varc=document.getElementById(“clock”);//找到clock画布元素varctx=c.getContext("2d");//获取绘图对象//显示今天日期vartime=newDate();//定义时间变量ctx.fillStyle="#666";ctx.font="14ptVerdana";ctx.fillText(time.getMo

6、nth()+1+"-"+time.getDate(),180,170);ctx.fillStyle="red";ctx.arc(200,100,4,0,Math.PI*2,true);//画圆ctx.fill();//填充路径ctx.strokeStyle="red";//时针颜色为红色ctx.lineWidth=3;//时针宽度为3个像素pointer(ctx,200,200,160);}2变型2变型状态的保存与恢复canvas状态就是当前画面应用的所有样式和变形的一个快照。保存和恢复方法描述sav

7、e()保存当前canvas的状态restore()返回最后保存过的canvas状态2变型functiondraw(){varctx=document.getElementById('canvas').getContext('2d');ctx.fillStyle='red';ctx.fillRect(0,0,150,150);//绘制一个150*150的矩形ctx.save();//保存当前的画布状态ctx.fillStyle='#09F'//使用填充样式ctx.fillRect(15,15,120,1

8、20);//绘制一个120*120的矩形ctx.restore();//恢复最后一次保存的画布状态ctx.fillRect(30,30,90,90);//绘制一个90*90的矩形}2变型变换：变换就是变换位置，在canvas中可以使用translate方法来移动canvas和它的原点(0,0)到一个不同的位置。2变型旋转：旋转就是旋转Canvas位置，在canvas中可以使用rotate方法旋转Canvas。2变型变换与旋转functiondraw(){