先死后活法。
静态的：
代码：
<!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函数 绘图。
即最后就是 先回个图,后清除,又画图,后又清除 又继续画图 .....这样的循环。当然具体的实现还有其他的。
就产生动态。具体代码可复制直接运行(需要高版本浏览器)