Как сделать HTML элемент ** не ** вращаемым на iPad?

Question

В настоящее время я разрабатываю небольшое приложение для рисования на основе HTML5 Canvas / JavaScript, предназначенное для iPad. Он работает в сафари. Пока что все отлично работает, кроме одной вещи.

Если я поверну устройство, мой интерфейс переориентируется. Это круто для большей части пользовательского интерфейса, за исключением самого холста. Есть ли способ заставить холст не вращаться?

Answer 1

Как насчет настройки ориентации CSS:

<link rel="stylesheet" type="text/css" href="css/landscape.css" media="all and (orientation:landscape)">
<link rel="stylesheet" type="text/css" href="css/portrait.css" media="all and (orientation:portrait)">

и сдача:

-webkit-transform: rotate(-90deg)

в одной из двух ориентаций для противодействия автоматическому вращению?

Answer 2

В случае, если кто-то задается вопросом, как реализовать ответ Альнитака на практике, вы идете:

CSS:

@media all and (orientation:portrait) {
    #myCanvas {
        -webkit-transform: rotate(270deg)
    }    
}

В качестве альтернативы вы можете использовать отдельные файлы CSS, если хотите.

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

ctx.save();

...

if(window.orientation == 0 || window.orientation == 180) {
    ctx.translate(canvasWidth, 0);
    ctx.rotate(Math.PI / 2);
}

...

ctx.restore();

Могут быть и другие способы достижения того же результата, но, похоже, это работает нормально длямне.Обратите внимание, что это хорошая идея для сохранения / восстановления состояния контекста, чтобы не испортить его при повороте.