如何避免画布中填充区域之间的接缝？

Question

当我填充HTML5 Canvas中的相邻区域或Quartz或GDI +等类似系统时,我在共享边缘看到一个浅色接缝.这是一个例子,(下面的代码):

我想我明白发生了什么,但没有解决.每个边缘都是白色的抗锯齿,所以不是混合橙色和蓝色,而是混合了橙色,蓝色和白色.

基本上同样的问题之前已被问过,但讨论较少且没有好的答案.

一些解决方案涉及在接缝处绘制稍大一点的第一个形状或在接缝上画一条线不会妨碍透明度或奇怪形状组合等变化.

关闭抗锯齿避免了支持它的API的接缝,但当然,所有边缘都是锯齿状的.

有没有办法向渲染器提供关于预期邻接的提示？

<canvas id="myCanvas" width="300" height="150" /> <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,0);  ctx.lineTo(115,150);  ctx.lineTo(300, 50);
ctx.closePath();  ctx.fillStyle="#885533";  ctx.fill();

ctx.beginPath();
ctx.moveTo(0,50);  ctx.lineTo(100,0);  ctx.lineTo(115,150);
ctx.closePath();  ctx.fillStyle="#335588";  ctx.fill();
</script>  </body>  </html>

Answer 1

如果您\xe2\x80\x99在透明画布上绘图并且您的形状不重叠，您可以简单地设置ctx.globalCompositeOperation = "lighter"：

\n\n

\n\n

这意味着每个形状将使用简单的加法而不是典型的alpha 混合将其贡献与其像素的先前内容结合起来。在这种情况下，\xe2\x80\x99 正是您想要的。

\n