如何在 Firefox 中将画布旋转 90 度答案

【问题标题】：How to rotate the canvas by 90 degree in Firefox如何在 Firefox 中将画布旋转 90 度
【发布时间】：2016-06-29 09:56:31
【问题描述】：

我正在尝试通过以下代码 sn-p 将 html5 画布旋转 90 度。它在除 Firefox 之外的所有浏览器中都能正常工作。

var canvas = document.getElementById('pagecanvas_' + i);
var canvasUrl = canvas.toDataURL();
var context = canvas.getContext('2d');
var image = new Image();
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(-Math.PI / 2);
image.src = canvasUrl;
context.drawImage(image, -image.width/2 , -image.height/2);
context.restore();

请提供您解决此问题的想法。如果我做错了什么，也请告诉我？

【问题讨论】：

"如果我做错了什么，请告诉我" 是的，您无需等待图像加载完成后再绘制。什么是可见的问题？图像是否已绘制并且根本没有旋转？如果是这样，这不是你的问题，但肯定会在某个时候出现。
感谢@Kaiido。是的，我必须在这里使用 onload。
这是否解决了问题？如果是这样，您可能想删除该问题，因为它是由“错字”引起的，并且不太可能帮助任何进一步的读者。（此外还有大量的dupe）

标签： javascript html firefox canvas rotation

【解决方案1】：

看起来你在这里搞混了一些事情。首先加载图像，然后将图像绘制到画布上。您不能像那样混合它并期望获得一致甚至有效的结果

var canvas = document.getElementById('pagecanvas_' + i);
var canvasUrl = canvas.toDataURL();
var context = canvas.getContext('2d');
var image = new Image();
img.onload = function(){
   drawCanvas();
}
img.src = canvasUrl;

function drawCanvas(){
    context.save();
    context.translate(canvas.width / 2, canvas.height / 2);
    context.rotate(-Math.PI / 2);
    context.drawImage(image, -image.width/2 , -image.height/2);
    context.translate(-canvas.width / 2, -canvas.height / 2);
    context.restore();

}

【讨论】：