1. 程式人生 > >2.2 canvas畫個圓,每次點選畫布,小圓向右移動1px

2.2 canvas畫個圓,每次點選畫布,小圓向右移動1px

<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>