Canvas上で文字列をアニメーションさせてみる

HTML5のCanvas上で文字列をアニメーションさせてみました。

こんな感じのサンプルです。
http://imacome.herokuapp.com/

まずはHTMLでCanvasを用意します。

Canvas

<div id="wrapper">
  <canvas></canvas>
</div>

続いて、サーバから表示するメッセージの一覧を取ってくる関数を定義します。
今回はRailsのscaffoldでMessage.contentだけのモデルを用意しました。

文字列取得

function reloadMessages(callback) {
  $.get('/messages.json', {}, function(res) {
    var messages = [];

    $(res).each(function(idx, item) {
      var pt = randomPoint();
      messages.push({
        content: item.content,
        color: randomColor(),
        delta: randomNumber(1,30),
        direction: 1,
        position: pt
      });
    });
    callback(messages);
  });
}

サーバからメッセージを取得後、Canvasに描画する関数です。clearRectで一端クリアしてから、fillTextで文字列を指定した座標に描画します。

文字列描画

function onReload(messages) {
  var canvas = $('canvas')[0];
  var context = canvas.getContext('2d');

  // キャンバスクリア
  context.clearRect(0, 0, $(canvas).width(), $(canvas).height());
  $(messages).each(function(idx, msg) {
    context.font = 'Normal 14pt System';
    context.shadowColor = 'white';
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
    context.shadowBlur = 10;
    context.fillStyle = msg.color;
    context.fillText(msg.content, msg.position.x, msg.position.y);
  });

  _messages = messages;
}

最後に、アニメーションさせるためにsetIntervalで一定時間毎に再描画を繰り返すようにします。

アニメーション

$(function() {
  var canvas = $('canvas')[0];
  $(canvas).attr({height: $('#wrapper').height()});
  $(canvas).attr({width: $('#wrapper').width()});

  reloadMessages(onReload);

  // アニメーションのため定期実行
  setInterval(function() {
    $(_messages).each(function(idx, msg) {
      if (msg.position.x < -200) {
        msg.position.x = $('canvas').width();
      } else {
        msg.position.x -= (msg.delta/10.0) * msg.direction;
      }
    });
    onReload(_messages);
  }, 10);
});

サーバも含めたソース一式はこちらからどうぞ。
https://github.com/yuch/imacome