html5 动画(图片)移动实质

先死后活法。

静态的：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态一点</title>
</head>
<body>
   <canvas id="tsp" height="400px" width="500px" style="background-color: black"> </canvas>
 <script type="text/javascript">
     var can=document.getElementById("tsp");
     var ctxt=can.getContext("2d");

     function drawBall(){
         ctxt.beginPath();
         ctxt.fillStyle="#FF0000";
         ctxt.arc(30,30,10,0,360,true);
         ctxt.closePath();
         ctxt.fill();
     }
     drawBall();

 </script>
</body>
</html>

如图：

动态：

1：(事件注册) 安aswd 接受并处理事件源。

2：画布绘图( ctxt.arc(30,30,10,0,360,true); )前面2个参数动态产生

2.1：申明全局变量

2.2：上一步操作((事件注册) 安aswd 接受并处理事件源。)修改全局变量

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态</title>
</head>
<body onkeydown="test()">
   <canvas id="tsp" height="400px" width="500px" style="background-color: black"> </canvas>
 <script type="text/javascript">
     var can=document.getElementById("tsp");
     var ctxt=can.getContext("2d");

     var ballX=30,
         ballY=30;
     function drawBall(){
         ctxt.beginPath();
         ctxt.fillStyle="#FF0000";
         ctxt.arc(ballX,ballY,10,0,360,true);
         ctxt.closePath();
         ctxt.fill();
     }

     drawBall();

     function test(){
         ctxt.clearRect(0,0,400,300);
         var code=event.keyCode;
         switch(code){
             case 87:
                 ballY--;
             break;
             case 68:
                 ballX++;
                 break;
             case 83:
                 ballY++;
                 break;
             case 65:
                 ballX--;
                 break;
         }
         drawBall();
     };
 </script>
</body>
</html>

总结：看test键盘按钮事件处理有个ctxt.clearRect(0,0,400,300);看单词就知道是清除什么,然后调用drawBall函数绘图。

即最后就是先回个图,后清除,又画图,后又清除又继续画图 .....这样的循环。当然具体的实现还有其他的。

就产生动态。具体代码可复制直接运行(需要高版本浏览器)