html вращайте весь холст на 90 градусов

У меня есть изображение, нарисованное на html-кавале. Я хотел бы иметь возможность поворачивать изображение на 90 градусов, но я не могу найти пример того, как вращать весь холст-изображение, а только объект на холсте.html вращайте весь холст на 90 градусов

У кого-нибудь есть пример кода для поворота всего холста на 90 градусов?

Я принял anwser ниже, но хотел, чтобы обеспечить дополнительный пример кода: http://jsfiddle.net/VTyNF/1/

<canvas id="myCanvas" width="578" height="200"></canvas> 

<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    context.translate(canvas.width/2,canvas.height/2) 
    context.rotate(90 * (Math.PI/180)); 
    context.beginPath(); 
    context.rect(188 - canvas.width/2, 50 - canvas.height/2, 200, 100); 
    context.fillStyle = 'yellow'; 
    context.fill(); 
    context.lineWidth = 7; 
    context.strokeStyle = 'black'; 
    context.stroke(); 
</script>

источник

2013-08-08 Kyle

Не могли бы вы предоставить примерный код, пожалуйста? –

Я так думаю? http://jsfiddle.net/VTyNF/1/ После того, как он вращается, он должен быть вертикальным, а не горизонтальным, и все еще находится в центре холста. – Kyle

Помните, что вы не можете повернуть любые рисунки, которые уже существуют на вашем холсте. Поэтому сначала очистите все существующие чертежи с холстом с помощью context.clearRect (0,0, canvas.width, canvas.height); Затем, чтобы повернуть весь ваш холст, вы делаете context.rotate (90 * Math.PI/180); Затем перерисуйте все, что хотите на холсте, и эти новые рисунки будут повернуты на 90 градусов. – markE

Вам нужно будет применить это вращение, прежде чем нарисовать свой холст. Вы не можете повернуть все, что уже нарисовано.

Итак:

Чтобы повернуть холст, то content.rotate() ожидает значение в радианах. Таким образом, во-первых, позволяет сделать его простым путем преобразования градусов в радианы с помощью:

function getRadianAngle(degreeValue) { 
    return degreeValue * Math.PI/180; 
}

Вы можете перевести холст первым перед поворотом, так что его происхождение установлено правильно.

context.translate(context.width/2,context.height/2);

После того, как мы знаем, какое значение мы хотим, мы просто повернуть холст, прежде чем мы рисуем что-нибудь!

Обратите внимание, что в вашем примере прямоугольник, который вы нарисовали, также смещается в первых двух параметрах context.rect( X, Y, W, H) `.

Я считаю, что проще установить ширину в качестве переменных, а затем сделать просто математику, чтобы автоматически позиционировать окно, теперь заметите, что он отлично расположен в центре и отлично вращается!

DEMO:http://jsfiddle.net/shannonhochkins/VTyNF/6/

источник

2013-08-08 05:04:00

Хм.Спасибо за помощь до сих пор. Похоже, что он вращает его сверху слева. Есть ли способ получить поворот из центра? – Kyle

Сделайте context.translate (canvas.width/2, canvas.height/2) перед поворотом. – markE

Эй, @ user1308743, я отредактировал свою скрипку для вас. Добавлено свойство перевода! –

Не могли бы вы использовать CSS, чтобы повернуть <canvas> элемент с transform: rotate(90deg);?

источник

2013-08-08 04:49:58

Зачем ему это нужно – aaronman

Я хочу, чтобы фактическое изображение было повернуто, а не просто повернуто поворотом, поворачивая элемент холста. Изображение будет сохранено. – Kyle

Скажите, что у вашего canvas элемента есть id "foo". В JavaScript вы можете сделать что-то вроде этого:

var canvas = document.getElementById('foo'), 
    context = canvas.getContext('2d'); 

// Rotates the canvas 90 degrees 
context.rotate(90 * (Math.PI/180));

источник

2013-08-08 04:51:26 federicot

Вы можете легко повернуть изображение на девяносто градусов, манипулируя пиксельных данных. Если ваш холст не является квадратным, вам нужно будет сделать несколько вариантов того, что будет «правильным» ответом.

Используйте функцию getImageData, чтобы получить пиксели, управлять ими обычным способом и использовать putImageData для отображения результата.

источник

2013-08-08 06:06:32

html вращайте весь холст на 90 градусов

ответ

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