JavaScript でリサジュー

お久しぶりでございます。 休載していた間に JavaScript がずいぶん変わってしまったみたいで。 ためしに JavaScript でリサージュ（リサジュー）を描いてみよう。

onclik が無くなって、 var が無くなって、かなり変わりましたね。

ソースコードは、以下の通りです。

<div id="div20240217">
<canvas width="400" height="400" style="border:dashed; margin:10px;"></canvas>
<br/>
<input id="draw" type="button" value="PUSH ME"/>
</div>
<script type="text/javascript">
{
  const button = document.querySelector("div#div20240217 input#draw");
  button.draw = function () {
    const canvas = document.querySelector("div#div20240217 canvas");
    const context = canvas.getContext("2d");
    const fx = 5;
    const fy = 7;
    const cx = canvas.width * 0.5;
    const cy = canvas.height * 0.5;
    const dx = canvas.width * 0.45;
    const dy = canvas.height * 0.45;
    const N = 100;
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath()
    for (let i = 0; i < N; i++) {
      const x = cx + dx * Math.cos(2 * Math.PI * (i * fx / N));
      const y = cy + dy * Math.sin(2 * Math.PI * (i * fy / N));
      if (i ==0) {
        context.moveTo(x, y);
      } else {
        context.lineTo(x, y);
      }
    }
    context.closePath();
    context.stroke();
  }
  button.addEventListener("click", button.draw);
}
</script>

div でカプセル化

ブログ記事で使うことになると、他の記事との緩衝が問題になります。 そこで、この記事専用の div 要素 "div20240217" にすべてを入れる構造にしました。 他の記事を書く際には、 div の id さえ変更すれば干渉を防ぐことができるでしょう。

イベントリスナも内包

ボタンをクリックしたときに呼び出されるイベントリスナはボタンオブジェクトの属性 button.draw としました。 まあ、無名関数を使えばよかったんですけどね。