<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{background: #ccc;} #oc{background: #fff;} </style> </head> <body> <!--canvas 设置宽高需要在 html的属性中--> <canvas id="oc" width="400" height="400">浏览器不支持该标记！</canvas> <script> //获取画板 var oC = document.getElementById('oc'); //设置画板的2d效果 var oGC = oC.getContext('2d'); //方块移动 var x = 0;//x轴起始的位置 var y = 0;//y轴起始位置 oGC.fillRect(0,0,50,50); var timer = null;//定时器初始化 timer = setInterval(function(){ //清除画布 oGC.clearRect(0,0,oC.width,oC.height); if(x<350 && y==0 ){//上边 x++; }else if(x>=350 && y<350){//右边 x=350; y++; }else if(x<=350 && x>0 && y==350){//下边 x--; y=350; }else if(x==0 && y<=350){//左边 x=0; y--; } //画方块 oGC.fillRect(x,y,50,50); },1); </script> </body> </html>
用canvas实现方块走口子
猜你喜欢
转载自blog.csdn.net/qq_39634880/article/details/80375243
今日推荐
周排行