Question

我正在尝试绘制多个填充不同颜色的圆弧

        //-------------- draw
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(30, 30, 20, 0, Math.PI*2, true);
        ctx.fill();
        ctx.fillStyle = "red";
        ctx.arc(100, 100, 40, 0, Math.PI*2, true);
        ctx.fill();
        ctx.closePath();

这会产生两个用红色填充的弧线，我可以看出较小的弧线周围有一个微弱的黑色轮廓。

enter image description here

任何人都可以阐明如何实现这一目标吗？我做错了什么？

Answer 1

关闭路径，然后重新打开。

ctx.closePath();
ctx.beginPath();

jsFiddle

...在弧形图代码之间。

Circles

Answer 2

路径以beginPath开头，以endPath结尾。介于两者之间的每件事都是相同的道路。您甚至可以使用侧翼规则绘制带孔的路径。在一个方向上绘制一些东西，在相反的方向上绘制其他东西，但在第一个方面让我们用线画一个中间有一个洞的矩形。 beginPath方法（）; moveTo（10,10）; 了lineTo（100,10）; 了lineTo（（100,60）; 了lineTo（10,60）; 了lineTo（10,10）; closePath（）; 的moveTo（20,20）; 了lineTo（20,50）; 了lineTo（90,50）; 了lineTo（90,20）; 了lineTo（20,20）; closePath（）; endPath（）; 补（）;

你可以用任何形状做到这一点。使用较小的半径

在一个方向上尝试弧形，然后在相反方向上尝试另一个弧形

在路径中绘制不同颜色的形状（HTML5 Canvas / Javascript）

2 个答案: