Question

我在带有drawCircle函数的html5画布（this.ctx）上绘制圆圈。现在我想通过移动Circle功能将cirlce移动到不同的位置。有没有办法看到圆圈从一个地方移动到另一个地方？此时我甚至不确定如何删除用户的上一个圈子。我可以将弧分配给一个对象吗？

customobject.prototype.drawCircle = function drawCircle(userID, x, y) {

 var radius = 10;  
        this.ctx.beginPath();
        this.ctx.arc(100, 00, 10, 0, Math.PI*2, true);
        this.ctx.closePath();
        this.ctx.fillStyle = 'blue';
        this.ctx.fill();
        this.ctx.lineWidth = 2;
        this.ctx.strokeStyle = '#003300';
        this.ctx.stroke();   
}


customobject.prototype.moveCircle = function moveCircle(userID, x, y) {

}

我确实看到了一种可能删除圆圈的方法（不是动画 - 移动它）：

remove circle(x, y, radius){
    this.ctx.globalCompositeOperation = 'destination-out'
    this.ctx.arc(x, y, radius, 0, Math.PI*2, true);
    this.ctx.fill();
}

- ＆GT;所以在这种情况下，我会指定原始圆的坐标，它会被切割？

我还看到了this发布圈子的帖子。但我不知道如何用多个圈子做到这一点。（每个用户ID都有一个圆圈）

Answer 1

一旦绘制了圆形画面就不能先画一幅了，你可以在这个地方绘制另一个圆形但是背景颜色设置，但这会与其他绘制的对象快速冲突。

如果我做对了，你想要为圆圈的运动设置动画。这基本上是这样做的：

var start = new Date().getTime(),
    end = start + 1000; //one second of animation
    p1 = { x: 0, y: 0 }, //start coordinates
    p2 = { x: 100, y: 10 }; // end coordinates


function render (progress) {
  var x = p1.x + progress * (p2.x - p1.x),
      y = p1.y + progress * (p2.y - p1.y);

  clearCanvas();
  drawCircle(x,y);
}

function loop () {
  var now = new Date().getTime(),
      progress = (now - start)/(end - start);

  if (progress >= 0 && progress <= 1) {
    render(progress);
    window.requestAnimationFrame(loop);
  }
}

loop();

基础知识：

你需要一个动画循环，没有for或while循环，使用计时器，setTimeout()或setInterval()会做，但是{{1这是为了做这些事情。
在动画中找到进度，这通常是介于0和1之间的数字，其中0表示开始，1表示结束，介于进度之间的所有内容。
清除画布并根据进度重新渲染所有内容。
重复，直到进度大于1。

在html5画布上移动圆圈

1 个答案: