Canvas绘制三角形出现意外轮廓的解决方法求助

你遇到的这种缝隙，本质是Canvas 2D渲染的子像素抗锯齿导致的：当图形边缘落在像素边界之间时，浏览器会用半透明像素填充过渡区域，相邻图形的半透明边缘叠加后就会透出背景色，形成看起来像“轮廓”的缝隙。你之前尝试的image-rendering: pixelated和ctx.imageSmoothingEnabled = false都是针对图像缩放的设置，对矢量路径的填充抗锯齿无效。

下面给你几个高效可行的解决方案：

1. 给填充图形添加同色极细描边 #

给每个填充的图形添加一条和填充色一致、宽度为0.5px的描边，刚好能覆盖子像素级的半透明边缘，而且性能开销几乎可以忽略，不会出现自定义轮廓的卡顿问题。

修改后的示例代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制第一个三角形
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 300);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
// 添加同色细描边覆盖缝隙
ctx.strokeStyle = "white";
ctx.lineWidth = 0.5;
ctx.stroke();

// 绘制第二个三角形
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(200, 300);
ctx.lineTo(300, 300);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.strokeStyle = "white";
ctx.lineWidth = 0.5;
ctx.stroke();

2. 合并相邻图形的路径 #

如果相邻图形属于同一个整体（比如你的例子里两个三角形组成正方形），可以把它们的路径合并成一个，一次性填充。Canvas会自动处理内部边缘，不会产生缝隙。

示例代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 合并路径绘制整个正方形
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 300);
ctx.lineTo(200, 300);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();

3. 调整绘制坐标到半像素偏移（仅适用于轴对齐图形） #

对于垂直/水平边缘的图形，可以把坐标偏移0.5px（比如从200改成200.5），让边缘刚好对齐像素中心，避免子像素抗锯齿。但这个方法对非轴对齐的斜线条无效，所以对你的3D引擎场景适用性有限。

内容的提问来源于stack exchange，提问作者GamedevyGuy