JavaScriptでお絵かき

JavaScriptで描画プログラムを作ってみます。 Canvasを使うと簡単に作れそうです。 とりあえず、ドットインストールの入門編の出だしの情報をもとに、 思いつきで作ってみました。

URLはこちら。

https://yamamoto-works.jp/canvas/test01.html

実行イメージはこんなの。

f:id:yamamoto-works:20200211223720p:plain

ソースコードはこれ。 そういえば、N88-BASICとかで、 こんなのを作っていたのを思い出しました。


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>test1</title>
    <style>
      #mycanvas {
        border: 10px solid #999;
      }
    </style>
  </head>
  <body>
    <canvas width="400" height="400" id="mycanvas">
      Canvasに対応したブラウザを用意してください。
    </canvas>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
      $(function() {
        const canvas = document.getElementById('mycanvas');
        if (!canvas || !canvas.getContext) return false;
        const ctx = canvas.getContext('2d');

        for (let s = 0; s < 400; s += 20) {
          ctx.beginPath();
          ctx.moveTo(0, s);
          ctx.lineTo(s, 399);
          ctx.stroke();
        }

      });
    </script>
  </body>
</html>