EaselJS学習(1)

HTML

<script src="http://pyro.jp/dev/lib/js/easel.js"></script>
<div id="container">
    <canvas id="canvas" width="500" height="300"></canvas>
</div>

CSS

#container {
    background: #fff100;
    height: 300px;
    margin:0 auto;
    text-align: center;
}

JavaScript

var canvas, stage, 
     star1, star2, star3, img,
     halfX, halfY;

canvas = document.getElementById("canvas");
halfX = canvas.clientWidth * 0.5;
halfY = canvas.clientHeight * 0.5;

stage = new Stage( canvas );

star1 = new Shape();
star1.graphics.beginFill("#ff0000").drawPolyStar(0, 0, 75, 5, 0.6, -90);
star1.x = 100;
star1.y = halfY;
star1.shadow = new Shadow("#726b00", 5, 5, 10);
stage.addChild( star1 );

star2 = new Shape();
star2.graphics.beginLinearGradientFill(["#80dbe3","#ffffff","#ff0000"], [0, 0.5, 1], 0, -65, 0, 65).drawPolyStar(0, 0, 75, 5, 0.6, -90);
star2.x = 260;
star2.y = halfY;
star2.shadow = new Shadow("#726b00", 5, 5, 10);
stage.addChild( star2 );

img = new Image();
img.src = "http://pyro.jp/dev/resources/pyrojp3.png";
img.onload = function() {
    star3 = new Shape();
    star3.graphics.beginBitmapFill(img, "repeat").drawPolyStar(0, 0, 75, 5, 0.6, -90);
    star3.x = 420;
    star3.y = halfY;
    star3.shadow = new Shadow("#726b00", 5, 5, 10);
    stage.addChild( star3 );
    stage.update();
};