以一个小球来回顾一下canvas的小知识吧，因为也有一段时间没怎么接触这玩意了。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>来回跑动的小球</title> </head> <body> <div style="500px; height:500px; background:#CCC"> <canvas id='canvas' width="500" height="500"></canvas> </div> <script> var x = 0,y = 0; function init() { var context = document.getElementById('canvas'); var ctx = context.getContext("2d");//获取上下文内容 ctx.clearRect(0, 0, 500, 500);//参数分别为x,y,宽度,高度 ctx.beginPath();//绘制开始 ctx.fillStyle = '#169008'; ctx.arc(x++,y++,5,0,Math.PI*2,true); ctx.fill();//填充颜色 ctx.closePath();//结束绘画 } window.onload = function(){ setInterval(function(){ init() if(x >= 500){ x = 0, y = 0;} },10) } </script> </body> </html>