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軸(左上が0)
  • y:y軸(左上が0)
  • w:幅
  • h:高さ

画像を指定したい場合は、drawImageメソッドを利用します。

var img = new Image();
img.src = "sample.jpg";
ctx.drawImage(img, x, y);
  • このエントリーをはてなブックマークに追加
  • Pocket

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。