JavaScriptでお絵かき - Canvasでドット単位の操作 その3

引き続き、Canvasで絵を描いてみます。 今回は円周上にランダムに点を打っていきます。 円を描くなら別の方法がありますが、 ここでのやり方は、ランダムに点をうって、 結果的に円になっています。

単に座標を計算して点をうつだけなので、 あまり説明することはないように思います。

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

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>test4</title>
    <style>
      #mycanvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas width="400" height="400" id="mycanvas"></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');
        const maxW = canvas.width;
        const maxH = canvas.height;
        const imgData = ctx.createImageData(maxW, maxH);

        for (let i = 0; i < 10000; i++) {
          let t = Math.random() * Math.PI * 2;
          let r = maxW/2 * 0.75;
          let x = Math.floor(Math.cos(t) * r) + maxW/2;
          let y = Math.floor(Math.sin(t) * r) + maxH/2;

          let idx = (x + y*maxW) * 4;
          imgData.data[idx]   = 0;
          imgData.data[idx+1] = 0;
          imgData.data[idx+2] = 0;
          imgData.data[idx+3] = 255;
        }
        ctx.putImageData(imgData, 0, 0);
      });
    </script>
  </body>
</html>