H5中标签Canvas实现图像动画

一：主题部分

1.介绍

　　canvas可以实现画图功能，所以只要通过js的控制，就可以实现简单的动画效果。

　　这里主要是两个程序，一个小球来回上下弹跳，一个是吹气球。

2.弹跳程序

 <!DOCTYPE html>

 <head>

     <meta charset="utf-8">

     <title>canvas dynamic</title>

     <script src="D:\jquery\jquery-1.12.4.min.js"></script>

 </head>

 <body>

     <canvas id="dynamic" width="200" height="200"></canvas>

     <br/>

     <script type="text/javascript">

         var width=200;

         var height=200;

         var start=0;

         var exp=1;

         var canvas=document.getElementById("dynamic");

         var dynamic=canvas.getContext("2d");

         function draw(){

             dynamic.clearRect(0,0,width,height);

             dynamic.fillStyle="red";

             dynamic.beginPath();

             dynamic.arc(100,start,30,0,Math.PI*2,1);

             dynamic.closePath();

             dynamic.fill();

             start=start+exp;

             if(start==0||start==height-1){

                 exp=exp*-1;

             }

         }

     </script>

     <input onclick="dyid=setInterval(draw,10);" type="button" value="开始"/>

     <input onclick="clearInterval(dyid);" type="button" value="停止">

 </body>

 </html>

3.运行结果

4.气球程序

 <!DOCTYPE html>

 <head>

     <meta charset="utf-8">

     <title>canvas dynamic</title>

     <script src="D:\jquery\jquery-1.12.4.min.js"></script>

 </head>

 <body>

     <canvas id="dynamic" width="400" height="200"></canvas>

     <br/>

     <script type="text/javascript">

         var width=400;

         var height=200;

         var start=0;

         var exp=1;

         var canvas=document.getElementById("dynamic");

         var dynamic=canvas.getContext("2d");

         function draw(){

             dynamic.clearRect(0,0,width,height);

             dynamic.fillStyle="red";

             dynamic.beginPath();

             dynamic.arc(200,start,start,0,Math.PI*2,1);

             dynamic.closePath();

             dynamic.fill();

             start=start+exp;

             if(start==0||start==height-1){

                 exp=exp*-1;

             }

         }

     </script>

     <input onclick="dyid=setInterval(draw,10);" type="button" value="开始"/>

     <input onclick="clearInterval(dyid);" type="button" value="停止">

 </body>

 </html>

5.运行结果

二：问题

　　通过测试，发现的问题，经过多次点击之后，单击停止没有效果。

　　程序只是针对一次开始，一次停止的结果。

　　bug以后再进行修改。

巴特西

H5中标签Canvas实现图像动画

最新文章

热门文章