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

最佳答案:

您需要跟踪您绘制的圆圈(以及其他对象) – 一种方法是将它们推送到mouseup上的数组中.然后每个绘图前面都应该有一个画布清晰并重绘已保存的圆圈.

var circles = [];

...

清除画布

...

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

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

...

绘制保存的圆圈

...

context.fill();

// drawing saved circles

circles.forEach(function(circle){

context.beginPath();

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

context.strokeStyle="#000000";

context.fillStyle="#FFFFFF";

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

context.stroke();

context.fill();

})

...

保存完成的圈子

...

bIsDrawing = false;

// saving completed circles

var nDeltaX = nStartX - e.clientX;

var nDeltaY = nStartY - e.clientY;

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

circles.push({ nStartX: nStartX, nStartY: nStartY, radius: radius });

...

标签：javascript,html5,canvas

来源： https://codeday.me/bug/20190516/1115713.html