XY座標のデータをアニメーションにする方法

2015/09/04

連続した座標データをアニメーションにする方法を調べてみたけどあまりなかったので備忘録としてまとめ。

JSON形式のデータをHTML5の描画機能「Canvas」を使ってアニメーションにする方法をまとめます。

Contents

1 XY座標のデータはJSON形式に変換
2 JSONの読み込みはJQuery
3 HTML5のCanvasでアニメーション

XY座標のデータはJSON形式に変換

なんとなく扱いやすそうなので、XY座標のデータはJSON形式にしましょう。

[
  {"X":1,"Y":"1"},
  {"X":2,"Y":"2"},
  {"X":3,"Y":"3"},
  {"X":4,"Y":"4"},
]

[

{"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>

<!DOCTYPE html>

<head>

<style>

canvas {

border: solid 1px #999;

}

</style>

$(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>

</body>

</html>

HTML5のCanvasでアニメーション

JQUERYを使って、JSON形式のファイルが扱えるようになったらCanvasでアニメーションを描画します。

<!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 len = data.length;

    var cs  = document.getElementById('loop');
    var ctx = cs.getContext('2d');
    var w = cs.width;
    var h = cs.height;
    var x = 0;
    var y = 0;
    var i = 0;

         (function render() {
                ctx.clearRect(0, 0, w, h);
                ctx.beginPath();
                ctx.fillRect(x, y, 10, 10);
                if (x > cs.width) {
                    x = 0;
                    y = 0;
                } else {
                    x = data[i].X;
                    y = data[i].Y;
                }
                i++;

                if (i<len){
                        requestAnimationFrame(render);
                }
            })();

  });
});
</script>
</head>
<body>
<canvas id="loop" width="1100" height="750"></canvas>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

canvas {

border: solid 1px #999;

}

</style>

$(function() {

$.getJSON("data2.json" , function(data) {

var len = data.length;

var cs = document.getElementById('loop');

var ctx = cs.getContext('2d');

var w = cs.width;

var h = cs.height;

var x = 0;

var y = 0;

var i = 0;

(function render() {

ctx.clearRect(0, 0, w, h);

ctx.beginPath();

ctx.fillRect(x, y, 10, 10);

if (x > cs.width) {

x = 0;

y = 0;

} else {

x = data[i].X;

y = data[i].Y;

}

i++;

if (i<len){

requestAnimationFrame(render);

}

})();

});

</script>

</head>

<body>

</body>

</html>

上のサンプルでは、黒四角でしたが、四角の黒線がいい場合は、strokeRectメソッドを利用するといいです。また、strokeStyleメソッドで色の指定もできます。

ctx.strokeStyle = "black";
ctx.strokeRect(x, y, 10, 10);

1 2	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);

var img = new Image();

img.src = "sample.jpg";

ctx.drawImage(img, x, y);

linux

なおべりーのブログ

Linuxやレバメモなどを書いてます

XY座標のデータをアニメーションにする方法

XY座標のデータはJSON形式に変換

JSONの読み込みはJQuery

HTML5のCanvasでアニメーション

関連記事-こちらもどうぞ

この記事へのコメントはこちらコメントをキャンセル

XY座標のデータはJSON形式に変換

JSONの読み込みはJQuery

HTML5のCanvasでアニメーション

関連記事-こちらもどうぞ

この記事へのコメントはこちら コメントをキャンセル

この記事へのコメントはこちらコメントをキャンセル