一：主题部分
1.介绍
canvas可以实现画图功能，所以只要通过js的控制，就可以实现简单的动画效果。
这里主要是两个程序，一个小球来回上下弹跳，一个是吹气球。
2.弹跳程序
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>canvas dynamic</title> 5 <script src="D:jqueryjquery-1.12.4.min.js"></script> 6 </head> 7 <body> 8 <canvas id="dynamic" width="200" height="200"></canvas> 9 <br/> 10 <script type="text/javascript"> 11 var width=200; 12 var height=200; 13 var start=0; 14 var exp=1; 15 var canvas=document.getElementById("dynamic"); 16 var dynamic=canvas.getContext("2d"); 17 function draw(){ 18 dynamic.clearRect(0,0,width,height); 19 dynamic.fillStyle="red"; 20 dynamic.beginPath(); 21 dynamic.arc(100,start,30,0,Math.PI*2,1); 22 dynamic.closePath(); 23 dynamic.fill(); 24 start=start+exp; 25 if(start==0||start==height-1){ 26 exp=exp*-1; 27 } 28 } 29 </script> 30 <input onclick="dyid=setInterval(draw,10);" type="button" value="开始"/> 31 <input onclick="clearInterval(dyid);" type="button" value="停止"> 32 </body> 33 </html>
3.运行结果
4.气球程序
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>canvas dynamic</title> 5 <script src="D:jqueryjquery-1.12.4.min.js"></script> 6 </head> 7 <body> 8 <canvas id="dynamic" width="400" height="200"></canvas> 9 <br/> 10 <script type="text/javascript"> 11 var width=400; 12 var height=200; 13 var start=0; 14 var exp=1; 15 var canvas=document.getElementById("dynamic"); 16 var dynamic=canvas.getContext("2d"); 17 function draw(){ 18 dynamic.clearRect(0,0,width,height); 19 dynamic.fillStyle="red"; 20 dynamic.beginPath(); 21 dynamic.arc(200,start,start,0,Math.PI*2,1); 22 dynamic.closePath(); 23 dynamic.fill(); 24 start=start+exp; 25 if(start==0||start==height-1){ 26 exp=exp*-1; 27 } 28 } 29 </script> 30 <input onclick="dyid=setInterval(draw,10);" type="button" value="开始"/> 31 <input onclick="clearInterval(dyid);" type="button" value="停止"> 32 </body> 33 </html>
5.运行结果
二：问题
1.
通过测试，发现的问题，经过多次点击之后，单击停止没有效果。
程序只是针对一次开始，一次停止的结果。
bug以后再进行修改。