<canvas>元素最后一篇制作简单动画

具体步骤

1.自定义一个函数，用于图形的移动或其他动作

3.使用setImage（）方法设置动画执行的间隔时间，反复执行自定义函数

一大段代码来袭

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script type="text/javascript" language="jscript" src="js6-15.js"></script>
 7 </head>
 8 
 9 <body onLoad="pageload()">
10 <canvas id="cnvMain" height="280px" width="280px"></canvas>
11 
12 </body>
13 </html>

js

 1 // JavaScript Document
 2 function $$(id){
 3     return document.getElementById(id);
 4 }
 5 var intI,intJ,intX;
 6 //自定义加载函数
 7 function pageload(){
 8     var cnv=$$("cnvMain");
 9     var cxt=cnv.getContext("2d");
10     drawFace(cxt);
11     intI=1;
12     intJ=21;
13     setInterval(moveFace,100);
14     }
15     //调用自定义函数绘制脸部形状
16     function drawFace(cxt){
17         drawCirc(cxt,"#666",30,80,30,2,true);
18         drawCirc(cxt,"#fff",20,70,5,2,true);
19         drawCirc(cxt,"#fff",40,70,5,2,true);
20         drawCirc(cxt,"#fff",30,80,18,1,false);
21         
22         }
23         //根据参数绘制各类圆形
24         function drawCirc(cxt,strColor,intX,intY,intR,intH,blnFill){
25             cxt.beginPath();
26             cxt.arc(intX,intY,intR,0,Math.PI*intH,blnFill);
27             if(blnFill){
28             cxt.fillStyle=strColor;
29             cxt.fill();    
30             }else{
31                 cxt.lineWidth=2;
32                 cxt.strokeStyle=strColor;
33                 cxt.stroke();
34                 }
35                 cxt.closePath();
36             }
37     //实现往返移动圆形脸部的功能
38     function moveFace(){
39         var cnv=$$("cnvMain");
40         var cxt=cnv.getContext("2d");
41         cxt.clearRect(0,0,280,190);
42         if(intI<20){
43             intI+=1;
44             intX=intI;
45             }else{
46                 if(intJ>0){
47                     intJ-=1;
48                     intX=-intJ;
49                     }
50                 }
51                 cxt.translate(intX,0);
52                 drawFace(cxt);
53         }

步骤

定义四个函数

pageload()加载页面时调用
drawface（）绘制卡通笑脸
drawcirc（）根据传递的参数值，使用fill与stroke方法绘制指定位置、填充色、半径、弧度的圆形；
moveface（）用于实现往返移动笑脸的功能
在drawface中调用了四次drawCirc（）函数
在moveface中，先根据自增量intI的值使用translate方法向右移动卡通笑脸
当intI大于20时，转为获取intJ的值，根据自检量“intU”的值，使用setinterval（）方法按时反复执行函数moveFace（）


posted @ 2017-03-16 12:01  943987243  阅读(295)  评论(0)  编辑  收藏  举报