コメント：この記事では、JSとHTML5を使用できるキャンバス回転効果の例を紹介します。
keleyi.htmのコードは次のとおりです。
<！doctype html>
<html>
<head>
<Title> HTML回転キャンバス</title>
<script type = "text/javascript" src = "/jquery-1.10.2.min.js"> </scrip>
<script type = "text/javascript" src = "jb51.js"> </script>
</head>
<body>
<canvas> </canvas>
</body>
</html>
JB51.jsのコードは次のとおりです。
/*
*関数：キャンバス回転
*/
（関数（）{
var canvas = null、
コンテキスト= null、
角度= 0;
function 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（ "reorient"、resetcanvas）;
$（document）.ready（function（）{
window.scrollto（0,1）;
resetcanvas（）;
SetInterval（Animate、40）;
}）;
}）（）;