正文
HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘图小实例之方块移动</title> <style> body{ background:#000;} #canvas1{ margin:100px 500px; background:#fff;} #canvas1 span{ color:#fff;} </style> <script> window.onload = function(){ var oCanvas = document.getElementById('canvas1'); var oContext = oCanvas.getContext('2d'); //获取绘图的2d环境 var num = 0; //画一个方块 oContext.fillStyle = 'red'; oContext.fillRect(num,num,50,50); //开启定时器 setInterval(function(){ num++; //先清除之前的方块 oContext.clearRect(0,0,oCanvas.width,oCanvas.height); //重新绘制方块 oContext.fillRect(num,num,50,50); },30); } </script> </head> <body> <canvas id="canvas1" width="1000" height="1000"> <span>该浏览器不支持canvas</span> </canvas> </body> </html>
