<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/easeljs-0.7.1.min.js" charset="utf-8"></script>
<script src="lib/tweenjs-0.5.1.min.js" charset="utf-8"></script>
<!-- <script src="Circle.js" charset="utf-8"></script>
<script src="app.js" charset="utf-8"></script>-->
</head>
<body onload="init()" style="margin:20px">
<canvas id="canvas" width="800" height="600" style="border:black solid 1px"></canvas>
</body>
<script type="text/javascript">
var stage
function init(){
stage=new createjs.Stage('canvas')
createjs.Ticker.addEventListener("tick",handleTick)
createjs.Ticker.setFPS(60)
start()
}
function handleTick(e){
stage.update()
}
function start(){
var rectangle=new createjs.Shape()
rectangle.graphics.beginStroke("#000")
rectangle.graphics.beginFill("#ff0000")
rectangle.graphics.drawRect(0,0,150,100)
rectangle.x=rectangle.y=20
stage.addChild(rectangle);
var circle=new createjs.Shape()
circle.graphics.beginFill("#fff000")
circle.graphics.beginStroke("#000")
circle.graphics.drawCircle(0,0,50)
circle.x=250
circle.y=70
stage.addChild(circle)
var poly=new createjs.Shape()
poly.graphics.beginFill("#00ff00")
poly.graphics.beginStroke("#000")
poly.graphics.drawPolyStar(0,0,60,6,0.6)
poly.x=400
poly.y=70
stage.addChild(poly)
var tri=new createjs.Shape()
tri.graphics.beginStroke('#000')
tri.graphics.beginFill("#00FF00")
tri.graphics.moveTo(50,0)
.lineTo(0,100)
.lineTo(100,100)
.lineTo(50,0)
tri.x=20
tri.y=150
stage.addChild(tri)
var rounderRect=new createjs.Shape()
rounderRect.graphics.beginStroke("#000")
rounderRect.graphics.beginFill("#FF0000")
rounderRect.graphics.drawRoundRect(0,0,400,100,10)
rounderRect.x=rounderRect.y=150
stage.addChild(rounderRect)
}
</script>
</html>