[CreateJS] 線を描く

CreateJSを使って、線を描いてみるよ。 :bouzu:

createjs_figure_basic

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name=”viewport” content=”width=800” />
<title>figure [basic] | CreateJS</title>
<script src="js/easeljs-1.0.0.min.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  html, body {
    margin:0;
    padding:0;
    font-family: sans-serif;
  }
  #canvas{
    display:block;
    width:800px;
    margin-top:480px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>
var canvas, stage, 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);

  background();

  initialize();

  createjs.Ticker.framerate = 30;
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
  if (createjs.Touch.isSupported()) {
    createjs.Touch.enable(stage);
  }

  createjs.Ticker.addEventListener("tick", update);
  stage.update();
}
function update(event) {
  stage.update();

  stats.update();
}
function initialize() {
  //太さ1の直線
  var line1 = new createjs.Shape();
  stage.addChild(line1);
  line1.x = 80;
  line1.y = 180;
  line1.graphics.setStrokeStyle(1);
  line1.graphics.beginStroke(”#FFFFFF”);
  line1.graphics.moveTo(0, -60);
  line1.graphics.lineTo(0, 60);
  line1.graphics.endStroke();
  //太さ2の直線
  var line2 = new createjs.Shape();
  stage.addChild(line2);
  line2.x = 80;
  line2.y = 360;
  line2.graphics.setStrokeStyle(2);
  line2.graphics.beginStroke(”#FFFFFF”);
  line2.graphics.moveTo(0, -60);
  line2.graphics.lineTo(0, 60);
  line2.graphics.endStroke();
  //太さ1の二等辺三角形
  var triangle1 = new createjs.Shape();
  stage.addChild(triangle1);
  triangle1.x = 240;
  triangle1.y = 180;
  triangle1.graphics.setStrokeStyle(1);
  triangle1.graphics.beginStroke(”#FFFFFF”);
  triangle1.graphics.moveTo(0, -60);
  triangle1.graphics.lineTo(-60, 60);
  triangle1.graphics.lineTo(60, 60);
  triangle1.graphics.lineTo(0, -60);
  triangle1.graphics.endStroke();
  //太さ2の二等辺三角形
  var triangle2 = new createjs.Shape();
  stage.addChild(triangle2);
  triangle2.x = 240;
  triangle2.y = 360;
  triangle2.graphics.setStrokeStyle(2);
  triangle2.graphics.beginStroke(”#FFFFFF”);
  triangle2.graphics.moveTo(0, -60);
  triangle2.graphics.lineTo(-60, 60);
  triangle2.graphics.lineTo(60, 60);
  triangle2.graphics.lineTo(0, -60);
  triangle2.graphics.endStroke();
  //太さ1の長方形
  var rectangle1 = new createjs.Shape();
  stage.addChild(rectangle1);
  rectangle1.x = 480;
  rectangle1.y = 180;
  rectangle1.graphics.setStrokeStyle(1);
  rectangle1.graphics.beginStroke(”#FFFFFF”);
  rectangle1.graphics.drawRect(-80, -60, 160, 120);
  rectangle1.graphics.endStroke();
  //太さ2の長方形
  var rectangle2 = new createjs.Shape();
  stage.addChild(rectangle2);
  rectangle2.x = 480;
  rectangle2.y = 360;
  rectangle2.graphics.setStrokeStyle(2);
  rectangle2.graphics.beginStroke(”#FFFFFF”);
  rectangle2.graphics.drawRect(-80, -60, 160, 120);
  rectangle2.graphics.endStroke();
  //太さ1の円
  var circle1 = new createjs.Shape();
  stage.addChild(circle1);
  circle1.x = 700;
  circle1.y = 180;
  circle1.graphics.setStrokeStyle(1);
  circle1.graphics.beginStroke(”#FFFFFF”);
  circle1.graphics.drawCircle(0, 0, 60);
  circle1.graphics.endStroke();
  //太さ2の円
  var circle2 = new createjs.Shape();
  stage.addChild(circle2);
  circle2.x = 700;
  circle2.y = 360;
  circle2.graphics.setStrokeStyle(2);
  circle2.graphics.beginStroke(”#FFFFFF”);
  circle2.graphics.drawCircle(0, 0, 60);
  circle2.graphics.endStroke();
}
function background() {
  var sky = new createjs.Shape();
  stage.addChild(sky);
  sky.graphics.beginLinearGradientFill(["#0069A0", "#00AAE4"], [0, 1], 0, 0, 0, 480);
  sky.graphics.drawRect(0, 0, 800, 480);

  var basic = new createjs.Text("HTML5 / CreateJS [1.0.0]", "14px Arial", "#000000");
  stage.addChild(basic);
  basic.textAlign = "left";
  basic.textBaseline = "bottom";
  basic.x = 10;
  basic.y = 20;
  basic.alpha = 0.6;
  var title = new createjs.Text("figure [basic]", "24px Arial", "#000000");
  stage.addChild(title);
  title.textAlign = "center";
  title.textBaseline = "bottom";
  title.x = canvas.width/2;
  title.y = 65;
  title.alpha = 0.6;
  var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC", "14px Arial", "#000000");
  stage.addChild(publish);
  publish.textAlign = "right";
  publish.textBaseline = "bottom";
  publish.x = canvas.width - 10;
  publish.y = 20;
  publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
  <canvas id="canvas" width=”800" height=”480" style="background-color:#FFFFFF"></canvas>
</body>
</html>


[修正] (19/12/23 Sun 23:28)
CreateJS 1.0.0 にバージョンアップ。