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

1 回答

• 1

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

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

  Working Live Demo:

  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/

  回复于 2024-04-28T00:29:47+08:00