XY座標のデータをアニメーションにする方法
連続した座標データをアニメーションにする方法を調べてみたけどあまりなかったので備忘録としてまとめ。
JSON形式のデータをHTML5の描画機能「Canvas」を使ってアニメーションにする方法をまとめます。
XY座標のデータはJSON形式に変換
なんとなく扱いやすそうなので、XY座標のデータはJSON形式にしましょう。
[
{"X":1,"Y":"1"},
{"X":2,"Y":"2"},
{"X":3,"Y":"3"},
{"X":4,"Y":"4"},
]
JSONの読み込みはJQuery
JSONの読み込みは、これまた何となく流行りで簡単に使えそうなJQueryを使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
canvas {
border: solid 1px #999;
}
</style>
<script>
$(function() {
$.getJSON("data2.json" , function(data) {
var
ulObj = $("#json_demo"),
len = data.length;
for(var i = 0; i<len; i++) {
ulObj.append($("<li>").attr({"X":data[i].X}).text(data[i].Y));
}
});
});
</script>
</head>
<body>
<ul id="json_demo"></ul>
</body>
</html>
HTML5のCanvasでアニメーション
JQUERYを使って、JSON形式のファイルが扱えるようになったらCanvasでアニメーションを描画します。
上のサンプルでは、黒四角でしたが、四角の黒線がいい場合は、strokeRectメソッドを利用するといいです。また、strokeStyleメソッドで色の指定もできます。
ctx.strokeStyle = "black"; ctx.strokeRect(x, y, 10, 10);
ちなみにxxxxRect関数の引数は（x, y, w, h)の順番です。
- x:x軸（左上が０）
- y:y軸（左上が０）
- w:幅
- h:高さ
画像を指定したい場合は、drawImageメソッドを利用します。
var img = new Image(); img.src = "sample.jpg"; ctx.drawImage(img, x, y);
この記事へのコメントはこちら