javascript - 在 HTML5 Canvas 上绘制多个圆的问题

Question

能不能请你拍一个look at this演示并让我知道如何在不重复一堆代码的情况下在具有不同坐标的 Canvas 中绘制多个圆圈？

正如您在演示和以下代码中看到的那样

var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(150, 50, 5, 0, Math.PI * 2, true);
ctx.arc(20, 85, 5, 0, Math.PI * 2, true);
ctx.arc(160, 95, 5, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

我试图将它们放在 ctx 下，但它不正确，所以我尝试使用 for 循环来创建 50 个点，但我在重复和添加 ctx.fill() 等代码时遇到问题；对于他们所有人。 你能告诉我如何解决这个问题吗？

谢谢

Answer 1

不断创建和关闭新路径不是好建议。

您应该将相同样式的所有填充/描边批处理在一起，并在单个绘制调用中执行它们。随着多边形数量的增加，这些方法之间的性能差异很快就会变得明显。

解决方法是移动笔并为每个圆圈调用路径构造；一枪完成笔触/填充。然而，这里有一个怪癖。当您将点移动到中心并绘制圆时，您仍然会看到一条水平半径线，从圆心到圆周。

为了避免这种假象，我们不是向中心移动，而是向圆周移动。这将跳过半径绘图。基本上所有这些命令都是为了跟踪路径，如果不调用 closePath 就无法描述不连续性；通常 moveTo 会这样做，但 HTML5 canvas API 不会。这是一个简单的解决方法来解决这个问题。

const pi2 = Math.PI * 2;
const radius = 5;
ctx.fillStyle = '#00a308';
ctx.beginPath();

for( let i=0, l=coords.length; i < l; i++ )
{
    const p = coords[i],
    x = p.x,
    y = p.y;

    ctx.moveTo( x + radius, y ); // This was the line you were looking for
    ctx.arc( x, y, radius, 0, pi2 );
}

// Finally, draw outside loop
ctx.stroke();
ctx.fill();

同样值得考虑的是，使用变换，并绘制相对于本地引用系的所有内容。

ctx.fillStyle = '#00a308';
ctx.beginPath();

for( let i=0, l=coords.length; i < l; i++ )
{
    const p = coords[i];

    ctx.save();
        ctx.translate( p.x + radius, p.y );
        ctx.moveTo( 0, 0 );
        ctx.arc( 0, 0, radius, 0, pi2 );
    ctx.restore();
}

ctx.stroke();
ctx.fill();