canvas - 如何避免 Canvas 中填充区域之间的接缝？

Question

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



我想我明白发生了什么，但没有解决办法。每个边缘都针对白色进行抗锯齿处理，因此您会得到橙色、蓝色和白色的混合，而不是橙色和蓝色的混合。

本质上是 same question之前曾被问过，但讨论较少，也没有很好的答案。

一些涉及在接缝处将第一个形状画得更大一点或在接缝上画一条线的解决方法并不能承受诸如透明度或奇怪形状组合之类的变化。

关闭抗锯齿可以避免支持它的 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

Is there a way to provide a hint to the renderer about the intended adjacency?

不幸的是，不，抗锯齿/子像素化在默认情况下处于开启状态，我们无法将其关闭。

我可以想到一些方法来解决这个问题:

1) 使用注释中提及的技术 markE 并使用笔画 n
挤出将导致它们重叠的多边形。您可以通过首先设置 lineWidth 来减少影响。属性(property)到 0.67 .

2) 通过将重叠线的坐标(通过添加到坐标或使用平移)平移一个像素来手动重叠。这给出了比 1 更好的结果，因为这只会在重叠区域而不是在所有边上挤出多边形。然而，缺点是您需要手动计算每个重叠，这很快就会变得痛苦，特别是如果您还想为它们设置动画。

3)自己实现一条线和填充算法(例如Bresenham)。这并不难，但它会减慢绘图速度，如果您经常更新图形，则很明显。好处是您可以确切地知道线的绘制位置。缺点是你没有抗锯齿，除非你也实现了这一点并以它自己的价格性能明智。

4) 1 和 3 的组合，其中使用 Bresenham 线算法使用 Canvas 的填充和过度绘制重叠线。

5) 使用一个大的屏幕外 Canvas 并按比例绘制所有内容。然后最后将所有内容绘制到屏幕 Canvas 上以达到目标大小(或者使用 CSS 设置目标大小)。这将有助于伪装间隙并为您提供更清晰的线条，您也可以保留原始坐标，但它需要更多的像素处理和更多内存，因此速度较慢，但​​不如手动线/填充方法慢 3。