Комментарий: Эта статья представляет пример эффекта ротации холста, который можно использовать JS и HTML5.
Кодекс keleyi.htm выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<title> HTML -вращающийся холст </title>
<script type = "text/javascript" src = "/jquery-1.10.2.min.js"> </script>
<script type = "text/javascript" src = "jb51.js"> </script>
</head>
<тело>
<Canvas> </canvas>
</body>
</html>
Кодекс jb51.js выглядит следующим образом:
/*
* Функция: вращение холста
*/
(function () {
var canvas = null,
контекст = null,
угол = 0;
функция resetCanvas () {
canvas = document.getElementById ("JB51");
canvas.width = window.innerwidth;
canvas.height = window.innerheight;
context = canvas.getContext ("2d");
}
функция animate () {
context.save ();
пытаться{
// очистить холст
context.clearrect (0, 0, canvas.width, canvas.height);
// Установить начало
Context.translate (Canvas.width * 0,5, Canvas.height * 0,5);
// угол вращения
context.rotate (angle);
// установить цвет заполнения
context.fillstyle = "#ff0000";
// нарисовать прямоугольник
context.fillrect (-30, -30, 60, 60);
Угол += 0,05 * MATH.PI;
}
Окончательно{
context.restore ();
}
}
$ (window) .bind ("resize", resetCanvas) .bind ("переориента", resetCanvas);
$ (document) .ready (function () {
window.scrollto (0,1);
ResetCanvas ();
SetInterval (Animate, 40);
});
}) ();