gpt4 book ai didi

javascript - 在 Canvas 中填充凹形

转载 作者:行者123 更新时间:2023-11-29 22:37:25 25 4
gpt4 key购买 nike

我正在使用以下代码在 Canvas 中绘制凹形:

    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

最佳答案

你可以画一个大圆圈然后从中剪出一个小圆圈:

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();

我必须使用翻译才能看到原始示例,所以这可能不太正确。

关于javascript - 在 Canvas 中填充凹形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4541945/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com