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

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

function sample() {
  // Stageオブジェクトを作成します
  var stage = new createjs.Stage("myCanvas");

  var shape1 = new createjs.Shape();
  shape1.graphics.beginStroke("gray");
  shape1.graphics.setStrokeStyle(1);
  shape1.graphics.beginLinearGradientFill(["#008500","#003500"], [0.1,1.0], 130, 70, 200, 270);
  shape1.graphics.drawCircle(130, 170, 100);
  stage.addChild(shape1);

  var shape2 = new createjs.Shape();
  shape2.graphics.beginStroke("gray");
  shape2.graphics.setStrokeStyle(3);
  shape2.graphics.arc(130, 170, 115, Math.PI*1.58, Math.PI*1.42, false);
  stage.addChild(shape2);

  var shape3 = new createjs.Shape();
  shape3.graphics.beginStroke("gray");
  shape3.graphics.setStrokeStyle(1);
  shape3.graphics.drawCircle(130, 170, 105);
  stage.addChild(shape3);

  var shape4 = new createjs.Shape();
  shape4.graphics.beginStroke("gray");
  shape4.graphics.setStrokeStyle(3);
  shape4.graphics.moveTo(100, 60);
  shape4.graphics.lineTo(110, 35);
  shape4.graphics.lineTo(150, 35);
  shape4.graphics.lineTo(160, 60);
  stage.addChild(shape4);

  var shape5 = new createjs.Shape();
  shape5.graphics.beginStroke("gray");
  shape5.graphics.setStrokeStyle(2);
  shape5.graphics.arc(130, 30, 22, Math.PI*0.0, Math.PI, true);
  stage.addChild(shape5);

  var shape6 = new createjs.Shape();
  shape6.graphics.beginStroke("gray");
  shape6.graphics.setStrokeStyle(2);
  shape6.graphics.moveTo(108, 30);
  shape6.graphics.lineTo(152, 30);
  stage.addChild(shape6);

  var shape7 = new createjs.Shape();
  shape7.graphics.beginStroke("gray");
  shape7.graphics.beginFill("#dcdcdc");
  shape7.graphics.setStrokeStyle(2);
  shape7.graphics.drawRect(115, 30, 30, 5);
  stage.addChild(shape7);

  var circleX = 130;
  var circleY = 170;
  var radius = 100;
  var startX = 40;
  var startY = 80;
  var increment = 20;

  // 円の中に垂直線を引く
  verticalLineInCircle(stage, circleX, circleY, radius, startX, increment);
  // 円の中に水平線を引く
  horizonLineInCircle(stage, circleX, circleY, radius, startY, increment);
  
  // Stageの描画を更新します
  stage.update();
}

/*
 円の中に垂直線を引く
  stage：canvas
  circleX：円の中心点X座標
  circleY：円の中心点Y座標
  radius：円の半径
  startX：垂直線の開始X座標
  increment：垂直線の間隔
*/
function verticalLineInCircle(
  stage, circleX, circleY, radius, startX, increment
)
{
  var n = 0;
  while (true)
  {
    // X座標を決める
    var x = startX + increment * n;
    
    // X座標が円の外側の場合ループ終了
    if (x >= circleX + radius) break;
    
    // 直角三角形の底辺bと斜辺cから、垂直線aの長さを求める
    
    // 底辺bの長さを求める
    var b = Math.abs(circleX - x);
    // 斜辺cは円の半径とイコール
    var c = radius;
    
    // 三平方の定理「c^2 = a^2 + b^2」より
    // ⇒ a = √(c^2 - b^2)
    var a = Math.sqrt(c * c - b * b);
    
    // Y座標を求める（上と下の2点）
    var y1 = circleY - a;
    var y2 = circleY + a;
    
    // 垂直線を引く
    var shp = new createjs.Shape();
    shp.graphics.beginStroke("forestgreen");
    shp.graphics.setStrokeStyle(2);
    shp.graphics.moveTo(x, y1);
    shp.graphics.lineTo(x, y2);
    stage.addChild(shp);
    
    // 次の垂直線のために、変数nをカウントアップ
    n++;
  }
}

/*
 円の中に水平線を引く
  stage：canvas
  circleX：円の中心点X座標
  circleY：円の中心点Y座標
  radius：円の半径
  startY：水平線の開始Y座標
  increment：水平線の間隔
*/
function horizonLineInCircle(
  stage, circleX, circleY, radius, startY, increment
)
{
  var n = 0;
  while (true)
  {
    // Y座標を決める
    var y = startY + increment * n;
    
    // Y座標が円の外側の場合ループ終了
    if (y >= circleY + radius) break;
    
    // 直角三角形の底辺bと斜辺cから、水平線aの長さを求める
    
    // 底辺bの長さを求める
    var b = Math.abs(circleY - y);
    // 斜辺cは円の半径とイコール
    var c = radius;
    
    // 三平方の定理「c^2 = a^2 + b^2」より
    // ⇒ a = √(c^2 - b^2)
    var a = Math.sqrt(c * c - b * b);
    
    // X座標を求める（左と右の2点）
    var x1 = circleX - a;
    var x2 = circleX + a;
    
    // 水平線を引く
    var shp = new createjs.Shape();
    shp.graphics.beginStroke("forestgreen");
    shp.graphics.setStrokeStyle(2);
    shp.graphics.moveTo(x1, y);
    shp.graphics.lineTo(x2, y);
    stage.addChild(shp);
    
    //次の水平線のために、変数nをカウントアップ
    n++;
  }
}
</script>