Canvas でローディングイメージ（読み込み中の画像）のアニメーションを作成する [html5 の Canvas を使ってみる：第卌五回]

Flash ではなく Ajax 等でのローディングイメージは画像を用いていたが、Canvas でもできるので、作ってみた。30° で 12 回転させ、その際に 12 で割っていった透明度を加えて行くと、くるくる回って見える。今回、よくあるこんな形がくるくる回るようにしてみた。


また、大きさ・色・回転の速さを自由に変えられるようにしてあるので、場面に応じて使えると思う。背景はもちろん透明にした。

★html 側

<canvas id="loading"></canvas>

★Javascript 側

function draw() {
// id: loading を変数 e に代入
  e = document.getElementById("loading");
// e で 2 次元描画を行うことの定義を変数 c に代入
  c = e.getContext('2d');
// 透明度を入れる配列を変数 alphas に定義
  alphas = new Array();
// 大きさ（Canvas のサイズ）を指定
  len = 30;
// 色を rgb 形式で指定
  color = "rgb(0, 102, 255)";
// Canvas のサイズを変更
  setCanvasSize();
// 速さをミリ秒で指定
  loadingTimer = setInterval(drawLoadingImage, 50);
}
// サイズを変えないとデフォルトの Canvas サイズが残り、たまに厄介なことになるので変更
function setCanvasSize() {
  e.width = len;
  e.height = len;
// サイズの半分を変数 r に代入
  r = len / 2;
// 1 つの形の大きさを定義
  w = Math.round(len * 0.1);
  h = Math.round(len * 0.25);
// rgb 形式で入力された色を、透明度の手前でぶった切り、変数 colorRGB へ代入
  var n = color.indexOf(")");
  colorRGB = "rgba(" + color.substr(4, (n - 4));
// rotate(); の性質上、x:0、y:0 で回転させた方が良いので、
// x:0、y:0 で描画させるものを Canvas の中央へ setTransform(); で移動
  c.setTransform(1, 0, 0, 1, r, r);
}
function drawLoadingImage() {
// 描画されているものを clearRect(); で消去
  c.clearRect(-r, -r, (r * 2), (r * 2));

  for (var i = 0; i < 12; i++) {
// alphas の値が揃っていなければ（最初の描画時）、alphas に透明度を追加
    if (alphas.length < 12) alphas.push(i / 12);
// colorRGB の後ろに透明度を付けて透明度付きの色を定義
    thisColor = colorRGB + "," + alphas[i] + ")";
// fillStyle で色を指定
    c.fillStyle = thisColor;
// strokeStyle で枠線に transparent を指定し無効化
    c.strokeStyle = "transparent";
// 描画開始
    c.beginPath();
// 上記の形を lineTo(); と quadraticCurveTo(); と closePath(); で描画
    c.moveTo((0 - w / 4), (r - h));
    c.quadraticCurveTo(0, (r - h - w / 2), (0 + w / 4), (r - h));
    c.lineTo((0 + w / 2), (r - w / 3));
    c.quadraticCurveTo(0, (r + w / 3), (0 - w / 2), (r - w / 3));
    c.closePath();
// fill(); と stroke(); で色付け
    c.fill();
    c.stroke();
// 次のために rotate(); で 30° 回転させておく
    c.rotate(30 * Math.PI / 180);
  }
// alphas の最後の要素を取得し、削除し、先頭へ追加
  alphas.splice(0, 0, alphas[11]).pop();
}
// 描画を止める処理
function stopLoading() {
  clearInterval(loadingTimer);
}

すると、こうなる。


次に大きさを 100 にしてみる。

len = 100;

次は色をグレー rgb(150, 150, 150) にしてみる。

color = "rgb(150, 150, 150)";

今度は回転の速さを 100 ミリ秒にしてみる。

loadingTimer = setInterval(drawLoadingImage, 100);

最後に、背景を黒くした上で、色を白 rgb(255, 255, 255) にしてみる。下地の黒の影響を受けないことが判る。

color = "rgb(255, 255, 255)";

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53