ランダムな円
大昔,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(); } }
詳しくはこのページのソースをご覧ください。