Javascript 在圆上使用的HTML5 Canvas ctx.clip（）方法在圆下留下一条线

我已经创建了一个程序来生成行星精灵。我通过创建一个循环路径来实现这一点，运行

ctx.clip（）

将以下所有层保持在循环内，然后绘制一个黑色透明的纹理层，然后在整个画布上绘制一个随机着色的矩形，然后在其上绘制一个阴影和辉光问题是，在剪切后，圆圈下方也会出现一条彩色线，我不知道为什么。我需要把这个取下来

---

这是一把小提琴。最后一行将代码设置为每半秒循环一次：

我不确定我是否理解您的问题，但我假设您正在谈论这个问题

目前，您在剪裁区域上绘制了大量图形。
在每次绘制时，新的抗锯齿工件将用于平滑最新的绘制。最后，原本应该是半透明的像素现在变成了完全不透明的像素。
另一方面，使用类似于

'destination-In'

的

globalCompositeOperation

，您只需要一个图形就可以进行合成（~clipping）。所以你不会积累人工制品。但即使你这样做了，全球合作组织也是全球性的，因为它考虑到了透明度，积累就不那么重要了

var ctx1=clip.getContext（'2d'）；
var ctx2=gCO.getContext（'2d'）；
var ctx3=gCO2.getContext（'2d'）；
ctx1.beginPath（）；
ctx1.弧（150150150，0，数学π*2）
ctx1.clip（）；
//在此剪裁区域上多次绘制将增加瑕疵
ctx1.fillRect（0,0300,150）；
ctx1.fillRect（0,0300,150）；
ctx1.fillRect（0,0300,150）；
ctx1.fillRect（0,0300,150）；
ctx2.beginPath（）；
ctx2.arc（1501501500，数学π*2）
ctx2.fillRect（0,0300,150）；
ctx2.globalCompositeOperation='destination in'；
//有了gCO，你只画一次，但即使你画了多次，仍然会有更少的人工制品
ctx2.fill（）；
ctx2.fill（）；
ctx2.fill（）；
ctx2.fill（）；
ctx2.globalCompositeOperation='source over'；
ctx3.beginPath（）；
ctx3.弧（1501501500，数学PI*2）
ctx3.fillRect（0,0300,150）；
ctx3.globalCompositeOperation='destination in'；
//只需一张图纸：
ctx3.fill（）；
ctx3.globalCompositeOperation='source over'；
ctx1.fillStyle=ctx2.fillStyle=ctx3.fillStyle=“白色”；
ctx1.fillText（'clipping'，120100）；
ctx2.fillText（'合成'，120100）；
ctx3.fillText（“单一合成”，120100）
画布{
边框：1px实心；
}
如果我更新了错误的图像会有帮助吗？哦，天哪，我错过了小提琴！你的小提琴现在似乎还可以用，谢谢！如果它像我以前的一样突然断了，我会回复的