html 透明的圆形,Javascript HTML5 Canvas绘制透明圆圈

我需要有一个函数在画布上绘制几个圆圈,从mousedown at center = x,y开始,并将鼠标拖动到deltaX,deltaY,从而为每个圆圈创建半径r.圆圈无法填充(需要它们透明),因此用户可以清楚地看到圆圈截取的位置.我的当前代码在拖动鼠标的同时绘制圆圈,这是预期的,但它也留下了那些额外的圆圈.我只需要在mouseup上留下圆圈.任何帮助表示赞赏.谢谢 ：).

var canvas=document.getElementById('canvas');

var context=canvas.getContext('2d');

var radius=50;

var nStartX = 0;

var nStartY = 0;

var bIsDrawing = false;

var putPoint = function(e){

nStartX = e.clientX;nStartY = e.clientY;

bIsDrawing = true;

radius = 0;

}

var drawPoint = function(e){

if(!bIsDrawing)

return;

var nDeltaX = nStartX - e.clientX;

var nDeltaY = nStartY - e.clientY;

radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY)

context.beginPath();

context.arc(nStartX, nStartY, radius, 0, Math.PI*2);

context.strokeStyle="#000000";

//context.fillStyle="#FFFFFF";

context.fillStyle = 'rgba(0, 0, 0, 0)';

context.stroke();

context.fill();

}

var stopPoint = function(e){

//context.clip();

//context.clearRect(0, 0, canvas.width, canvas.height);

bIsDrawing = false;

}

canvas.addEventListener('mousedown',putPoint);

canvas.addEventListener('mousemove',drawPoint);

canvas.addEventListener('mouseup',stopPoint);