HTML5のCanvasサンプルです。
<canvas id="canvas" width="500" height="500"></canvas>

function Draw()
{
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext('2d');
	ctx.clearRect(0,0,500,500);
	for(var i=0; i < 100; i++)
	{
		var kind = Math.floor(Math.random() * 100) % 2;
		var x = Math.floor(Math.random() * 100000) % 500;
		var y = Math.floor(Math.random() * 100000) % 500;
		var w = Math.floor(Math.random() * 100000) % 200;
		var r = Math.floor(Math.random() * 10000) % 256;
		var g = Math.floor(Math.random() * 10000) % 256;
		var b = Math.floor(Math.random() * 10000) % 256;
		ctx.beginPath();
		if (kind == 0)
		{
			ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
			ctx.fillRect(x,y,w,w);
		}
		else
		{
			ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
			ctx.arc(x,y,w,0,2*Math.PI,true);
			ctx.fill();
		}
	}
}
		





トップページ