Как повернуть холст на 90 градусов в Firefox

Я пытаюсь повернуть холст html5 до 90 градусов ниже фрагмента кода. Он отлично работает во всех браузерах, кроме Firefox.Как повернуть холст на 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();

Просьба представить вашу идею, чтобы решить эту проблему. Также дайте мне знать, если я ошибаюсь?

источник

2016-03-14 Parthi

«дайте мне знать, если я ошибаюсь» Да, вы не дождались загрузки изображения до его рисования. Какая видимая проблема? Нарисовано ли изображение и просто не повернуто? Если это так, это не ваша проблема, но будет в какой-то момент точно. – Kaiido

спасибо @Kaiido. да, я должен использовать onload здесь. – Parthi

Это устранило проблему? Если это так, вы можете удалить этот вопрос, поскольку он был вызван «опечаткой» и что вряд ли он поможет другим читателям. (более того, есть тонны [dupe] (http://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue-onload-and-cors/32880642#32880642)) – Kaiido

Похоже, у вас есть несколько вещей, смешанных здесь. Сначала загрузите изображение, затем нарисуйте изображение на холсте. Вы не можете так перепутать его и ожидать согласованных или даже рабочих результатов.

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

}

источник

2016-03-14 14:39:14 QBM5

Как повернуть холст на 90 градусов в Firefox

ответ

Смежные вопросы