More than 5 years have passed since last update.

背景をCanvasにする

Posted at 2012-05-29

背景をCanvasにしてグリグリ動かすとインパクトがあって良い。(これとかこういう感じ)
少し工夫しないとCanvasが前面に来てボタンの操作とかができなくなるので、下記のようなHTML/CSSを書いてやる。

<body>
  <canvas id="canvas"></canvas>
  <section id="body>
    /* 実際のbodyはここに書く */
  </section>
</body>

#canvas { position:fixed;    top:0; left:0; width:100%; height:100%; }
#body   { position:absolute; top:0; left:0; }

キャンバスサイズを小さめにしておくと拡大されてボワッとした感じになるけどそのぶん軽量。

var canvas = document.getElementById("canvas");
canvas.width  = 480;
canvas.height = 320;