ランダムな円

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

大昔,Javaという言語(JavaScriptではありません)が現れたとき,最初に作ったApplet(Webブラウザ上で動作するJavaのプログラム)が上のようなランダムな円でした。この懐かしい例題も,今ではJavaScriptで簡単に作ることができます。

function draw() {
  var canvas = document.getElementById('MyCanvas');
  var context = canvas.getContext('2d');
  for (var i = 0; i < 100; i++) {
    var x = 300 * Math.random();
    var y = 200 * Math.random();
    var r = 40 * Math.random() + 10;
    var c1 = Math.floor(256 * Math.random());
    var c2 = Math.floor(256 * Math.random());
    var 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();
  }
}

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