Question

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

＆＃13;

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

＆＃13;

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

Answer 2

在我的评论的基础上，这是一个跟踪所有圈子的例子。它与potatopeelings答案基本相同，但我想显示requestAnimationFrame的用法重绘而不依赖于用户行为。

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript HTML5 Canvas绘制透明圆圈

2 个答案: