Question

我使用以下代码在画布上绘制凹形：

    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#FFFFFF';
    ctx.fillStyle = '#000000';
    ctx.beginPath();
    ctx.arc(0, 0, this.radius, Math.PI*13/8, Math.PI*11/8, false);
    ctx.moveTo(this.radius * Math.sin(Math.PI/8), -(this.radius) * Math.cos(Math.PI/8));
    ctx.arc(0, -(this.radius) * Math.cos(Math.PI/8), this.radius * Math.sin(Math.PI/8), 0, Math.PI, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();

绘制的形状应该是一个圆形，并且从中切出另一个较小的圆圈，当我使用ctx.stroke（）绘制时，它会正确显示。但是，当我尝试在其上使用ctx.fill（）时（根据上下文要求），只填充较大的圆圈，覆盖较小的圆圈。

如何在中风边界内正确填充形状？

谢谢，

DLiKS

Answer 1

你可以画出一个大圆圈然后从中切出一个小圆圈：

https://developer.mozilla.org/en/Canvas_tutorial/Compositing

尝试“目的地”：

    ctx.strokeStyle = '#FFFFFF';
    ctx.fillStyle = '#000000';
    ctx.beginPath();
    ctx.arc(0, 0, this.radius, Math.PI * 13 / 8, Math.PI * 11 / 8, false);
    ctx.closePath();
    ctx.fill();

    ctx.globalCompositeOperation = "destination-out";
    ctx.beginPath();
    ctx.moveTo(this.radius * Math.sin(Math.PI / 8), -(this.radius) * Math.cos(Math.PI / 8));
    ctx.arc(0, -(this.radius) * Math.cos(Math.PI / 8), this.radius * Math.sin(Math.PI / 8), 0, Math.PI, false);
    ctx.closePath();
    ctx.fill();

我不得不使用翻译来查看原始示例，所以这可能不太正确。

在画布中填充凹面形状

1 个答案: