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

直線、四角形、円、円弧を組み合わせれば、ほとんどの図形が描けそうですね！

さて、残るところは、「円の中にある格子状の線」です。
これも等間隔に直線を引いていくだけで楽勝！かと思われたのですが・・・

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

// サンプル５（垂直線を等間隔に引いてみる）
function sample5() {
  var stage = new createjs.Stage("myCanvas");
  
  // 垂直線を等間隔に引くぞ！
  var x = 40;
  for(var i = 0; i < 10; i++){
    var shp = new createjs.Shape();
    shp.graphics.beginStroke("forestgreen");
    shp.graphics.setStrokeStyle(2);
    shp.graphics.moveTo(x, 70);
    shp.graphics.lineTo(x, 270);
    stage.addChild(shp);
    x += 20;
  }
  
  stage.update();
}
</script>

はい、直線が円からはみ出ました（笑）
直線の長さを固定にしたからこうなりました。

円からはみ出さないようにするには、直線の始点と終点を円との交点にしなければいけません。
・・・「円と直線の交点」かぁ。。。どうやって求めたらいいものか？？

何を隠そう、私は生まれも育ちも文系区文系町なもので、正直３日間悩みました。。。
あれこれ数学の参考書から使えそうな公式を探し回った結果、使えそうな公式が見つかりました！

それは、「三平方の定理」です。
別名「ピタゴラスの定理」。中学校で習ったのを思い出した！中学数学バンザイ！

さぁ、直角三角形を探してみましょう。
どこかな？・・・・あった！

このとき、円と直線の交点うち、X座標はわかっているので、交点のY座標を求めればいいですね。
「c = 円の半径」「b = 円の中心点X座標から垂直線X座標までの長さ」で、「aの長さ」が知りたいわけです。

三平方の定理に当てはめると・・・
「aの長さ」は、約75.9pxとでました。
交点のY座標を求めるには、中心点のY座標からaの長さをマイナスすればよいから、「170 - 75.9 = 94.1」、交点のY座標は「94.1px」です！

このように、三平方の定理を使って、円と直線の交点を求めていけば、垂直線の始点と終点が決まるわけです。
円の中に水平線を引く場合も、同じ考え方でいけますよ。