<body>
<canvas id="canvas" width="500" height="500" style="border:dashed 1px"></canvas>
</body>
<script>
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d')
var ball=function(x,y,r){
this.x=x;
this.y=y;
this.r=r;
this.draw=function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
ctx.stroke();
};
};
var ball=new ball(100,100,20);
ball.draw();
canvas.addEventListener('mousedown',function(){
ctx.clearRect(0,0,500,500); //清除画布
ball.x++; //小圆的圆心x加1
ball.draw();
})
</script>
<canvas id="canvas" width="500" height="500" style="border:dashed 1px"></canvas>
</body>
<script>
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d')
var ball=function(x,y,r){
this.x=x;
this.y=y;
this.r=r;
this.draw=function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
ctx.stroke();
};
};
var ball=new ball(100,100,20);
ball.draw();
canvas.addEventListener('mousedown',function(){
ctx.clearRect(0,0,500,500); //清除画布
ball.x++; //小圆的圆心x加1
ball.draw();
})
</script>