ランダムな円

お使いのブラウザはHTML5のcanvasに対応していないようです。

大昔,Javaという言語(JavaScriptではありません)が現れたとき,最初に作ったApplet(Webブラウザ上で動作するJavaのプログラム)が上のようなランダムな円でした。当時のパソコンは遅いので,パラパラパラと円がアニメーションのように現れました。この懐かしい例題も,今ではJavaScriptで簡単に作ることができます。今のパソコンは速いので,瞬間に描き終わってしまいます。

function draw() {
  const canvas = document.getElementById('MyCanvas');
  const context = canvas.getContext('2d');
  for (let i = 0; i < 100; i++) {
    const x = 300 * Math.random();
    const y = 200 * Math.random();
    const r = 40 * Math.random() + 10;
    const c1 = Math.floor(256 * Math.random());
    const c2 = Math.floor(256 * Math.random());
    const c3 = Math.floor(256 * Math.random());
    context.beginPath();
    context.arc(x, y, r, 0, 2 * Math.PI);
    context.fillStyle = "rgb(" + c1 + "," + c2 + "," + c3 + ")"
    context.fill();
  }
}

詳しくはこのページのソースをご覧ください。