Comentário: Este artigo apresenta um exemplo do efeito de rotação de tela de que JS e HTML5 podem ser usados.
O código de Keleyi.htm é o seguinte:
<! Doctype html>
<html>
<head>
<title> Canvas rotativas HTML </title>
<script type = "text/javascript" src = "/jQuery-1.10.2.min.js"> </script>
<script type = "text/javascript" src = "jb51.js"> </script>
</head>
<Body>
<lVAs> </canvas>
</body>
</html>
O código de JB51.js é o seguinte:
/*
* Função: rotação de tela
*/
(função(){
var tela = nulo,
contexto = nulo,
ângulo = 0;
função resetCanvas () {
tela = document.getElementById ("jb51");
canvas.width = window.innerwidth;
canvas.Height = window.innerHeight;
context = canvas.getContext ("2d");
}
function Animate () {
context.Save ();
tentar{
// Limpe a tela
context.clearRect (0, 0, Canvas.width, canvas.Height);
// Defina a origem
context.Translate (Canvas.width * 0.5, canvas.Height * 0.5);
// ângulo de rotação
context.rotate (ângulo);
// Defina a cor de preenchimento
context.fillstyle = "#ff0000";
// Desenhe retângulo
context.fillrect (-30, -30, 60, 60);
ângulo += 0,05 * math.pi;
}
Finalmente{
context.restore ();
}
}
$ (janela) .bind ("redimensionar", resetCanvas) .bind ("reorient", resetCanvas);
$ (document) .ready (function () {
window.scrollto (0,1);
resetCanvas ();
setInterval (animado, 40);
});
}) ();