JS初心者が始めるCreateJS 第2回

CreateJSこんにちは。
やっとJavaScriptを触ろうとしている ひろゆき です。

まずは、Stats導入してみます。
mrdoob/stats.js · GitHub

次に、星っぽいのを回してみます。

HTMLソースコード

[sourcecode language=”js”]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>star | CreateJS</title>

<link rel="stylesheet" type="text/css" href="css/index.css" media="all">
<script src="js/easeljs-0.7.0.min.js"></script>
<script src="js/stats.min.js"></script>

<script>
var canvas, stage, shape, stats;

function init() {
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.right = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);

canvas = document.getElementById("canvas");

stage = new createjs.Stage(canvas);

shape = new createjs.Shape();
stage.addChild(shape);
shape.x = canvas.width/2;
shape.y = canvas.height/2;
shape.graphics.beginFill("#FFFFFF");
shape.graphics.drawPolyStar(0, 0, 40, 6, 0.8, -90);

stage.update();

createjs.Ticker.setFPS(30);
//createjs.Ticker.addListener(this);
createjs.Ticker.addEventListener("tick", tick);
}
function tick() {
shape.rotation += 3;
stage.update();

stats.update();
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="600" height="200" style="background-color:#000000"></canvas>
</body>
</html>[/sourcecode]

star | CreateJS

ちょっと楽しくなってきましたー！

あ。回るだけですよ。いまは。

[追記] (2013.06.30.)
Ticker.addListener() は非推奨になっているようなので、書き換えました。
[追記] (2013.10.30.)
CreateJS を 0.7.0 にバージョンアップ。

Related Posts