我在正在处理的项目中使用HTML5 Canvas元素，并且在渲染一堆东西时遇到了一个非常奇怪的工件，我想知道是否有人见过。基本上，在这种特定情况下（这是我所见过的唯一一种产生这种行为的情况），我碰巧在应用程序中进行平移/缩放，并且注意到画布的一部分呈现出非常奇怪的渲染效果。经过进一步检查，我能够以非常简单的示例重现该效果：
在这种情况下，我有一条路径（坐标不变），并且从第一个屏幕截图到第二个屏幕截图的所有更改都是应用的变换矩阵（非常小）。
您可以在https://jsfiddle.net/ynsv66g8/上访问用于生成这些屏幕截图的JSFiddle，这是相关的渲染代码：
// Clear context
context.setTransform(1, 0, 0, 1, 0, 0);
context.fillStyle = "#000000";
context.fillRect(0, 0, 500, 500);
if (showArtifact) { // This transformation causes the artifact
context.transform(0.42494658722537976, 0, 0, -0.42494658722537976, 243.95776291868646, 373.14630356628857);
} else { // This transformation does not
context.transform(0.4175650109545749, 0, 0, -0.4175650109545749, 243.70987992043368, 371.06797574381795);
}
// Draw path
context.lineWidth = 3.488963446543301;
context.strokeStyle = 'red';
context.beginPath();
var p = path[0];
context.moveTo(p[0], p[1]);
for (var i = 1; i < path.length; ++i) {
p = path[i];
context.lineTo(p[0], p[1]);
}
context.closePath();
context.stroke();
它似乎与对
canvas.closePath()的调用有关，因为如果您删除对context.closePath()的调用并将其替换为：p = path[0];
context.lineTo(p[0], p[1]);
（因此手动“关闭”路径）一切都正常工作（当然，这确实不能解决我的特定问题，因为我依靠多个闭合路径来应用填充规则）。
可以使问题消失的另一个有趣的更改是反转
path数组（即，在定义后立即添加对path.reverse()的调用）。总的来说，所有这些似乎加起来是某种与路径特征相关的浏览器渲染错误，尤其是因为在我的Mac上，Chrome（v61.0.3163.91）和Firefox（v55）均出现此问题。 0.3），而不是Safari（v11）。我已经进行了广泛的搜索以尝试找到此问题（或类似问题），但是到目前为止，它是空的。
如果您对导致问题的原因有任何见解（或者如果共识是由某些浏览器错误引起的，则为报告此问题的正确方法）将不胜感激。
最佳答案
似乎是线路斜接问题；也就是说，当宽度相对于段大小/方向太大时，渲染器将无法正确连接线。
这似乎不受路径关闭的影响（我可以使用打开的路径重现工件）；请注意，手动关闭路径与closePath（）不同，因为在前一种情况下不执行任何行联接。
据我所知，似乎可以通过将lineJoin设置为'round'或减小线宽来解决...无论如何，对我来说似乎是一个渲染器错误...只是我的两分钱:)