我使用drawCircle函数在html5画布上绘制圆圈(this.ctx)。现在我想通过移动Circle函数将cirlce移到不同的位置。有没有办法看到圈子从一个地方移动到另一个地方?在这一点上,我甚至不知道如何删除用户的以前的圈子。我可以将弧线分配给某个物体吗?在html5画布上移动圈圈
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();
}
- >所以在这种情况下,我会指定原始圆的坐标,它会被切断?
我也看到了做一个圆圈移动this后。但我不知道如何与多个圈子做到这一点。 (每个用户ID都会有一个圆圈)
如果你有多个圆圈,那么最好的方法是使用像easel.js这样的库。好处是你可以给每个对象一个ID,并可以单独对它们执行一些操作。当然,如果你使用自定义方法,那么@ philipp是正确的,你必须清除画布,并使用requestAnimationFrame()重绘所有内容。 –
如果有多个圆圈,他也可以使用一个简单的数组,如'[{start :, end :, p1:{},p1:{},...},{...},...]'。然后只是循环,并呈现每个。但如果你需要更多的形状,样式,缓动功能,比图书馆更好。 – philipp