绘制多个可拖动的圆圈HTML5 Canvas

Question

我必须在HTML5画布上绘制多个可拖动的圆圈，并且我应该在创建后移动圆圈。但是在拖动绘制时会创建多个框架。如何在不重新加载页面的情况下将其删除？

以下是我的代码演示：

＆＃13;

＆＃13;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var startX;
var startY;
var isDown = false;

function handleMouseDown(e) {
  e.preventDefault();
  // e.stopPropagation();
  startX = parseInt(e.clientX - offsetX);
  startY = parseInt(e.clientY - offsetY);
  isDown = true;
}

function handleMouseUp(e) {
  if (!isDown) {
    return;
  }
  e.preventDefault();
  // e.stopPropagation();
  isDown = false;
}

function handleMouseOut(e) {
  if (!isDown) {
    return;
  }
  e.preventDefault();
  //e.stopPropagation();
  isDown = false;
}

function handleMouseMove(e) {
  if (!isDown) {
    return;
  }
  e.preventDefault();
  //e.stopPropagation();
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);
  if (isDown) {
    var dx = Math.abs(startX - mouseX);
    var dy = Math.abs(startY - mouseY);
    var midX = (startX + mouseX) / 2;
    var midY = (startY + mouseY) / 2;
    var r = Math.sqrt(dx * dx + dy * dy) / 2;
    alert(midX, midY);
    draw(midX, midY, r);
  }
}

function draw(midX, midY, r) {
  // ctx.save();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(midX, midY, r, 0, 2 * Math.PI, false);
  //ctx.restore();
  //ctx.stroke();
  ctx.fillStyle = getRandomColor();
  ctx.fill();
}

function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}


$("#canvas").mousedown(function(e) {
  handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
  handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
  handleMouseUp(e);
});
$("#canvas").mouseout(function(e) {
  handleMouseOut(e);
});

＆＃13;

 #canvas {
   border: 1px solid blue;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Drag to draw circles</h4>
<canvas id="canvas" width=600 height=400></canvas>
<button onclick="location.reload()">Reset</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用ctx.clearRect()清除画布而无需重新加载页面，如下所示：

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

现场演示：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var startX;
var startY;
var isDown = false;

function handleMouseDown(e) {
    e.preventDefault();
   // e.stopPropagation();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    isDown = true;
}

function handleMouseUp(e) {
    if (!isDown) {
        return;
    }
    e.preventDefault();
   // e.stopPropagation();
    isDown = false;
}

function handleMouseOut(e) {
    if (!isDown) {
        return;
    }
    e.preventDefault();
    //e.stopPropagation();
    isDown = false;
}

function handleMouseMove(e) {
    if (!isDown) {
        return;
    }
    e.preventDefault();
    //e.stopPropagation();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    if(isDown)
    {
        var dx = Math.abs(startX - mouseX);
        var dy = Math.abs(startY - mouseY);
        var midX = (startX + mouseX) / 2;
        var midY = (startY + mouseY) / 2;
        var r = Math.sqrt(dx * dx + dy * dy) / 2;
        //alert(midX,midY);
        draw(midX,midY,r);
    }
}

function draw(midX,midY,r) 
{
       // ctx.save();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(midX, midY, r, 0, 2 * Math.PI, false);
        //ctx.restore();
        //ctx.stroke();
         ctx.fillStyle = getRandomColor();
        ctx.fill();
}
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}


$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
    handleMouseOut(e);
});

document.getElementById("clear").onclick = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
};

#canvas {
    border:1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Drag to draw circles</h4>
<canvas id="canvas" width=600 height=400></canvas>
<button id="clear">Reset</button>

JSFiddle版本：https://jsfiddle.net/j9y7fqyx/