角度非常小（小于 0.014）的 Canvas ctx.rotate() 不适用于 Chrome、Edge答案

【问题标题】：Canvas ctx.rotate() with very small angles (less than 0.014) not working on Chrome, Edge角度非常小（小于 0.014）的 Canvas ctx.rotate() 不适用于 Chrome、Edge
【发布时间】：2022-08-08 16:05:33
【问题描述】：

我刚刚意识到如果角度低于0.014 度，Chrome（Edge）也不会执行画布旋转ctx.rotate()。它在 Firefox (Windows 10) 上运行良好。

任何解决方法的想法？我在设计中使用 0.01 度。使用更大的角度不是一种选择，因为它会改变设计。

const canvas = document.querySelector(\'canvas\'), ctx = canvas.getContext(\'2d\');

let cw = canvas.width = canvas.height = 600;
ctx.fillStyle = \'#000000\'; ctx.fillRect(0, 0, cw, cw);

let angle = 0.01;       

for (let i = 1; i <= 5000; i++) {
  ctx.translate(cw / 2, cw / 2); ctx.rotate(angle * Math.PI / 180); ctx.translate(-cw / 2, -cw / 2);

  ctx.beginPath();
  ctx.moveTo(100, 200);
  ctx.lineTo(500, 200);
  ctx.lineWidth = 10;
  ctx.strokeStyle = \'#FFFFFF\';
  ctx.stroke();
}

&lt;canvas&gt;&lt;/canvas&gt;

标签： javascript canvas rotation

【解决方案1】：

这是一个非常奇怪的错误，I did report 多亏了你，Skia 的团队在最新的 Chrome Canary (106.0.5225.0) 中修复了。
在此补丁进入稳定版本之前，或者对于那些愿意处理发生此错误的以前版本的 Chrome 的人，一个非常快速的解决方法是使用 DOMMatrix 来设置转换，这个 API 不会似乎受到此错误的影响。

const canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d');

let cw = canvas.width = canvas.height = 600;
ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, cw, cw);

let angle = 0.01;       
const mat = new DOMMatrix();
for (let i = 1; i <= 5000; i++) {
  mat.translateSelf(cw / 2, cw / 2);
  mat.rotateSelf(angle); // DOMMatrix.rotate is in angle...
  mat.translateSelf(-cw / 2, -cw / 2);
  ctx.setTransform(mat);
  
  ctx.beginPath();
  ctx.moveTo(100, 200);
  ctx.lineTo(500, 200);
  ctx.lineWidth = 10;
  ctx.strokeStyle = '#FFFFFF';
  ctx.stroke();
}

&lt;canvas&gt;&lt;/canvas&gt;

【讨论】：

真的很疯狂，即使getTransform() 返回的 DOMMatrix 也是最新的，所以在循环中执行ctx.setTransform(ctx.getTransform()); 确实可以使它工作......而且最好的是它甚至不是回归。我可以看到它发生在M60中......
凯多，非常感谢！它工作得很好:) 当我问的时候，我在想没有办法解决这个问题，你回答得很快。不过我不太明白你的评论。这是一种更好、更简单的方法吗？
不，这真的很骇人听闻，但它显示了这个错误是多么奇怪。而且我的调查还没有完成，这是我发现的一个新惊喜：jsfiddle.net/f0kmuao1 实际上是这批图纸确实会导致问题，这确实会带来更好的修复，我将在我的答案中包含：组成一条路径并只描边一次。
韩！实际上我错过了单一路径没有正确旋转！你在这里发现了什么乱七八糟的东西！我会尽快报告的。
Kaiido，即使单个路径旋转，我也无法使用它，因为在我的实际设置中，我有多条线、多边形等。使用 DOMMatrix 方法。谢谢！