Chrome94&95 画布错误

Question

Chrome 浏览器在 Canvas 绘图中存在明显的错误。 以下代码

 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.setTransform(2, 0, 0, 2, 0, 0); ctx.beginPath(); const arr = [ ["moveTo",7,209], ["lineTo",6318,403], ["lineTo",15786,453], ["lineTo",18942,451], ["lineTo",22098,28] ]; ctx.beginPath(); arr.forEach(item => { if (item[0] === 'lineTo') { ctx.lineTo(item[1], item[2]); } else if (item[0] === 'moveTo') { ctx.moveTo(item[1], item[2]); } }) ctx.strokeStyle = 'red' ctx.stroke();

 <canvas id="canvas" width=800 height=800 style="width: 400px; height: 400px" > </canvas>

Chrome94中的结果是这样的： Chrome94&95

Safari中相同的代码是这样的： Safari

那么有没有办法避免chrome中的这个错误？

Answer 1

此错误已在最新的 Canary 97 中修复。

这显然是您巨大坐标的舍入问题。 因此，为了避免它，请尽可能避免使用大坐标。

否则，如果您确实必须使用解决方法，则可以强制画布使用软件渲染。 但这会完全减慢您的画布速度，应尽可能避免。

 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d', { willReadFrequently: true // force software rendering (in 95+?) }); ctx.setTransform(2, 0, 0, 2, 0, 0); ctx.beginPath(); const arr = [ ["moveTo",7,209], ["lineTo",6318,403], ["lineTo",15786,453], ["lineTo",18942,451], ["lineTo",22098,28] ]; ctx.beginPath(); arr.forEach(item => { if (item[0] === 'lineTo') { ctx.lineTo(item[1], item[2]); } else if (item[0] === 'moveTo') { ctx.moveTo(item[1], item[2]); } }) ctx.strokeStyle = 'red'; // in case willReadFrequently didn't make it if (ctx.getContextAttributes && !ctx.getContextAttributes().willReadFrequently) { ctx.getImageData(0, 0, 1, 1); } ctx.stroke();

 <canvas id="canvas" width=800 height=800 style="width: 400px; height: 400px" > </canvas>

因此，如果您使用的是有问题的浏览器，最好尝试重现该错误并事先检查：

 const isBuggyBrowser = (() => { const ctx = document.createElement("canvas").getContext('2d'); // move the bug toward the top left corner ctx.setTransform(2, 0, 0, 2, -900, -900); // removed some fluff const arr = [ [7,209], [6318,403], [15786,453], [18942,451], [22098,28] ]; // lineTo from an empty subpath is auto-converted to moveTo arr.forEach(([x,y]) => ctx.lineTo(x, y)); ctx.stroke(); // not transparent return !!ctx.getImageData(0, 1, 1, 1).data[3] })(); console.log( "is your browser buggy?", isBuggyBrowser );

现在您可以有条件地应用解决方法：

 const isBuggyBrowser = (() => { const ctx = document.createElement("canvas").getContext('2d'); // move the bug toward the top left corner ctx.setTransform(2, 0, 0, 2, -900, -900); // removed some fluff const arr = [ [7,209], [6318,403], [15786,453], [18942,451], [22098,28] ]; // lineTo from an empty subpath is auto-converted to moveTo arr.forEach(([x,y]) => ctx.lineTo(x, y)); ctx.stroke(); // not transparent return !!ctx.getImageData(0, 1, 1, 1).data[3] })(); const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d', { willReadFrequently: isBuggyBrowser }); ctx.setTransform(2, 0, 0, 2, 0, 0); ctx.beginPath(); const arr = [ ["moveTo",7,209], ["lineTo",6318,403], ["lineTo",15786,453], ["lineTo",18942,451], ["lineTo",22098,28] ]; ctx.beginPath(); arr.forEach(item => { if (item[0] === 'lineTo') { ctx.lineTo(item[1], item[2]); } else if (item[0] === 'moveTo') { ctx.moveTo(item[1], item[2]); } }) ctx.strokeStyle = 'red'; // in case willReadFrequently didn't make it if (isBuggyBrowser && ctx.getContextAttributes && !ctx.getContextAttributes().willReadFrequently) { ctx.getImageData(0, 0, 1, 1); } ctx.stroke();

 <canvas id="canvas" width=800 height=800 style="width: 400px; height: 400px" > </canvas>