canvas移动小方块案例
点击数:1547 发布时间2018-07-10 22:30:10
<html>
<head>
<title>Dragging</title>
<style>
#cans{margin:150px;}
</style>
</head>
<body>
<canvas id="cans" width="400" height="400"></canvas>
<script type="text/javascript">
cav=document.getElementById("cans");
ctx=cav.getContext("2d");
var ball={
x:100,
y:100,
sp:2
}
ball.draw=function(){
ctx.fillRect(this.x,this.y,20,20);
}
ball.move=function(){
this.x-=this.sp;
this.y-=this.sp;
}
setInterval(function(){
ctx.clearRect(0,0,400,400)
ball.draw()
ball.move()
},30)
</script>
</body>
</html>