绘制圆圈，然后使用 html canvas 和 javascript 移动它

Question

我想知道如何使用 html5 的 canvas 画一个圆并四处移动。我已经有了画圆的代码，但是画完之后，我想拖来拖去。我试图按照操作顺序（绘制 --> 移动）来计算代码的实现，但不确定如何使用 canvas 和 JS 构建它。谁能帮帮我？？

下面是我的代码：

HTML

<body>
  <h1>Circle</h1>
  <div class="circle">
    <canvas id="myCanvasCircle" width="500" height="500"> your browser does not support HTML5 canvas tag.</canvas>

  </div>

</body>

JS

<script>

  var canvas = document.getElementById('myCanvasCircle'),
      ctx = canvas.getContext('2d'),
      circle = {},
      drag = false;

  function draw() {
    ctx.beginPath();
    ctx.arc(circle.X, circle.Y, circle.radius, 0, 2.0 * Math.PI);
    ctx.stroke();

  }

  function mouseDown(e) {

    circle.startX = e.pageX - this.offsetLeft;
    circle.startY = e.pageY - this.offsetTop;

    circle.X = circle.startX;
    circle.Y = circle.startY;

    circle.radius = 0;

    drag = true;
  }

  function mouseUp() {
    drag = false;

  }

  function mouseMove(e) {
    if (drag) {
      circle.X = e.pageX - this.offsetLeft;
      circle.Y = e.pageY - this.offsetTop;
      circle.radius = Math.sqrt(Math.pow((circle.X - circle.startX), 2) + Math.pow((circle.Y - circle.startY), 2));
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      draw();


    }
  }

  function init() {
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);

  }

  init();

</script>

Answer 1

如果您只想绘制一个圆圈，只需修改代码即可。

http://jsfiddle.net/15dkrakj/2/

circleMade = false;

//In mouseDown
if (!circleMade) {
    circle.radius = 0;
}

function mouseUp() {
    drag = false;
    circleMade = true;
}

//In mouseMove
if (!circleMade) {
    circle.radius = Math.sqrt(Math.pow((circle.X - circle.startX), 2) + Math.pow((circle.Y - circle.startY), 2));
}

只是不要在第一次鼠标上下移动后更改半径。

如果您希望能够绘制多个圆圈，然后拖动每个圆圈...那就有点复杂了。

在评论中回答问题：

http://jsfiddle.net/15dkrakj/3/

mouseMoved = false

//In mouse up
if(!mouseMoved){
    circle = {};
    circleMade = false;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}    
mouseMoved = false;

function mouseMove(e) {
    if (drag) {
        mouseMoved = true;
        ...

这跟踪鼠标是否被按下和移动。如果鼠标在按下时没有移动，则在鼠标抬起时清除屏幕并清空圆圈。

绘制圆圈，然后使用 html canvas 和 javascript 移动它

draw circle and then move it around using html canvas and javascript

html

javascript

geometry

canvas

drag