Question

我目前正在开发针对iPad的基于HTML5 Canvas / JavaScript的绘图应用程序。它在Safari中运行。到目前为止，除了一件事以外，一切都很好。

如果我旋转设备，我的UI会重新定位。除了画布本身之外，这对于大多数UI来说都很酷。有没有办法强制画布不？

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

如果有人想知道如何在实践中实施Alnitak的答案，请转到：

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

可能还有其他一些方法可以达到相同的效果，但这对我来说似乎没问题。请注意，保存/恢复上下文状态是个好主意，这样您就不会在旋转时弄乱它。

如何让HTML元素**不能在iPad上旋转？

2 个答案: