Javascript HTML5 Canvas 绘制透明圆圈答案

【问题标题】：Javascript HTML5 Canvas drawing transparent circlesJavascript HTML5 Canvas 绘制透明圆圈
【发布时间】：2016-04-14 12:20:22
【问题描述】：

我需要一个函数来在画布上绘制几个圆圈，从 center=x,y 的 mousedown 开始，然后将鼠标拖动到 deltaX,deltaY 从而为每个圆圈创建半径 r。圆圈不能有填充（需要透明），因此用户可以清楚地看到圆圈截取的位置。我当前的代码在拖动鼠标时绘制圆圈，这是意料之中的，但它也会留下那些额外的圆圈。我只需要在 mouseup 上留下圆圈。任何帮助表示赞赏。谢谢你:)。

<html>

<head>

</head>

<body style="margin:0">
<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>

<script>

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

</script>
</body>

</html>

【问题讨论】：

使用两个画布。在顶部上，您绘制当前处理的圆圈，并在间隔期间将其清除。在底部，您无需清除即可绘制最终结果。或者跟踪所有圈子并不断重绘。
如果你的圆可以是椭圆形，我也有这个想法jsfiddle.net/xXqsu/2

标签： javascript html canvas

【解决方案1】：

您需要跟踪您绘制的圆（和其他对象） - 一种方法是在 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 });
...

小提琴 - https://jsfiddle.net/9x77sg2h/

【讨论】：

这些不是透明的圆圈，给你的画布添加颜色然后你会看到

【解决方案2】：

根据我的评论，这里有一个跟踪所有圈子的示例。它与potatopeelings 的答案基本相同，但我想展示requestAnimationFrame 的用法以独立于用户行为重绘。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var circles = [];
var currentCircle = null;

requestAnimationFrame(function draw() {
    drawCircles();
    requestAnimationFrame(draw);
});

function putPoint(e){
    currentCircle = {
        center: {
            x: e.clientX - this.offsetLeft + window.scrollX,
            y: e.clientY - this.offsetTop + window.scrollY
        }
    };
}

function drawPoint(e)
{
    if (null !== currentCircle) {
        currentCircle.radius = Math.sqrt(
              Math.pow(currentCircle.center.x - e.clientX + this.offsetLeft - window.scrollX, 2)
            + Math.pow(currentCircle.center.y - e.clientY + this.offsetTop - window.scrollY, 2)
        );
    }
}

function drawCircles()
{
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    // previous
    circles.forEach(drawCircle);

    // current
    if (null !== currentCircle) {
        drawCircle(currentCircle);
    }
}

function drawCircle(circle)
{
    context.save();
    context.beginPath();
    context.arc(circle.center.x, circle.center.y, circle.radius, 0, 2 * Math.PI);
    context.strokeStyle= '#000000';
    context.fillStyle = 'rgba(0, 0, 0, 0)';
    context.stroke();
    context.fill();
    context.restore();
}

function stopPoint()
{
    if (null !== currentCircle) {
        circles.push(currentCircle);
        currentCircle = null;
    }
}

canvas.addEventListener('mousedown', putPoint, false);
canvas.addEventListener('mousemove', drawPoint, false);
canvas.addEventListener('mouseup', stopPoint, false);

&lt;canvas id="canvas" width="500" height="500" style="border:1px solid"&gt;&lt;/canvas&gt;

【讨论】：