ドラゴンレーダー風ナビ ～デザイン編～（2/4）

<script type="text/javascript">
// 画面ロード時にサンプル関数を呼び出します
window.addEventListener("load", sample1);

// サンプル１（直線を描画）
function sample1() {
  // Stageオブジェクトを作成します
  var stage = new createjs.Stage("myCanvas");
  
  // Shapeオブジェクトを作成して、直線を引きます
  var shape = new createjs.Shape();
  shape.graphics.beginStroke("red");
  shape.graphics.setStrokeStyle(3);
  shape.graphics.moveTo(100, 60);
  shape.graphics.lineTo(110, 35);
  shape.graphics.lineTo(150, 35);
  shape.graphics.lineTo(160, 60);
  shape.graphics.endStroke();
  
  // Stageに追加します
  stage.addChild(shape);
  // Stageの描画を更新します
  stage.update();
}
</script>

<script type="text/javascript">
// 画面ロード時にサンプル関数を呼び出します
window.addEventListener("load", sample2);

// サンプル２（四角形を描画）
function sample2() {
  // Stageオブジェクトを作成します
  var stage = new createjs.Stage("myCanvas");
  
  // Shapeオブジェクトを作成して、四角形を描きます
  var shape = new createjs.Shape();
  shape.graphics.beginStroke("red");
  shape.graphics.beginFill("pink");
  shape.graphics.setStrokeStyle(2);
  shape.graphics.drawRect(115, 30, 30, 5);
  
  // Stageに追加します
  stage.addChild(shape);
  // Stageの描画を更新します
  stage.update();
}
</script>

<script type="text/javascript">
// 画面ロード時にサンプル関数を呼び出します
window.addEventListener("load", sample3);

// サンプル３（円を描画）
function sample3() {
  // Stageオブジェクトを作成します
  var stage = new createjs.Stage("myCanvas");
  
  // Shapeオブジェクトを作成して、円を描きます
  // 1つ目の円（塗りつぶしなし）
  var shape1 = new createjs.Shape();
  shape1.graphics.beginStroke("blue");
  shape1.graphics.setStrokeStyle(1);
  shape1.graphics.drawCircle(130, 170, 105);
  stage.addChild(shape1);
  // 2つ目の円（グラデーションで塗りつぶし）
  var shape2 = new createjs.Shape();
  shape2.graphics.beginStroke("red");
  shape2.graphics.setStrokeStyle(1);
  shape2.graphics.beginLinearGradientFill(["#ff69b4","#ff1493"], [0.1,1.0], 130, 70, 180, 270);
  shape2.graphics.drawCircle(130, 170, 100);
  stage.addChild(shape2);
  
  // Stageの描画を更新します
  stage.update();
}
</script>

<script type="text/javascript">
// 画面ロード時にサンプル関数を呼び出します
window.addEventListener("load", sample4);

// サンプル４（円弧を描画）
function sample4() {
  // Stageオブジェクトを作成します
  var stage = new createjs.Stage("myCanvas");
  
  // Shapeオブジェクトを作成して、円弧を描きます
  // 1つ目の円弧（時計回り）
  var shape1 = new createjs.Shape();
  shape1.graphics.beginStroke("blue");
  shape1.graphics.setStrokeStyle(3);
  shape1.graphics.arc(130, 170, 115, Math.PI*1.58, Math.PI*1.42, false);
  stage.addChild(shape1);
  // 2つ目の円弧（反時計回り）
  var shape2 = new createjs.Shape();
  shape2.graphics.beginStroke("red");
  shape2.graphics.setStrokeStyle(2);
  shape2.graphics.arc(130, 30, 22, 0, Math.PI, true);
  stage.addChild(shape2);
  
  // Stageの描画を更新します
  stage.update();
}
</script>