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