Question

我正在尝试将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();

请提供您的想法以克服此问题。如果我认为有任何错误，请告诉我？

Answer 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();

}

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

1 个答案: