canvas绘制简单动画实例

 

 

<!DOCTYPE html>

<html>

<head>

<title>setTimeout方法的应用</title>

</head>

<body>

<canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

   var canvas = document.getElementById('myCanvas');

   var ctx = canvas.getContext('2d');

   var i=0;

   function move()

   {

       ctx.fillStyle = 'red';

       ctx.fillRect(i,i,50,50);

       i++;

       if (i==350)

       {

           i=0;

           ctx.clearRect(0,0,400,400);

       }

       setTimeout("move()",10);

   }

   move();

</script>

</body>

</html>

 

 

 

参考地址：https://www.cnblogs.com/cs-whut/p/13292760.html

 

posted @ 2021-11-02 17:19  Shimily  阅读(119)  评论(0)    收藏  举报