HTML5, canvas: 一些线宽太窄然后消失

Question

愚蠢简单的canvas用法：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.scale(100000, 100000);
ctx.lineWidth = 0.00001;
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas>

不显示当前线段。如果我改成这个：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.scale(10000, 10000);
ctx.lineWidth = 0.0001;
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas>

线段会显示吗？为什么会这样。这很烦人。感谢您的帮助！

Answer 1

这是由 Chrome 使用的 GPU 渲染器中的错误引起的。

我们可以通过使用 willReadFrequently 标志初始化您的上下文来确认它只是 GPU 管道中的一个错误，但这不是一个合适的解决方案（因为您需要 GPU 加速可用时）。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d", { willReadFrequently: true });
ctx.scale(100000, 100000);
ctx.lineWidth = 0.00001;
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas>

所以，open an issue against Chromium, you can point to them that apparently this CL 引入这个问题会很棒，因此它是一个倒退。

当你在那里的时候，你也可以打开一个 against WebKit，它甚至没有通过 x10,000 规模测试。

不过老实说，你是在自找麻烦。
这种“舍入”错误经常在各种引擎中出现和消失，不仅如此明显，有时仅在执行特定曲线等时才会出现。

所以最好是坚持“标准”尺度，如果你真的需要那么远，然后从 JS 自己做尺度：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
const scale = 100_000;
ctx.moveTo(0, 0);
ctx.lineTo(200 * scale, 100 * scale);
ctx.stroke();

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas>

HTML5, canvas: 一些线宽太窄然后消失

HTML5, canvas: some linewidth too narrow and then disappear

html

javascript

html5-canvas