HTML5 Canvasいじり

*Graphics +html5Canvas


http://www.geocities.jp/psipage/html5/html5_canvas2.html
boxの中でクリックすると素敵な円が現れます。マウス座標にも付いていくはず。

ソース

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Example2: HTML5 canvas</title>
<!--http://d.hatena.ne.jp/juntk/-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="ms">Click in the box. </div>
<canvas id="canvassample" width="640" height="320"
	onmousedown="mouseClicked()"
	onmousemove="mouseMove(event.clientX, event.clientY)"
	onmouseup="mouseUp()"
>here
</canvas>
<script type="text/javascript">
// init
window.onload = function() {
	setInterval('draw()',15);
};

var w_size = 640;
var h_size = w_size / 2;
var mouse_X = 0;
var mouse_Y = 0;
var draw_allow = false;

// draw
var _oval_size = 15;
var oval_size = _oval_size;
var padding = w_size / 2 / 2;
var posX = [];
var posY = [];
var _color = [];
var _count = 12;
	
function draw() {
	/* canvas要素のノードオブジェクト */
	var canvas = document.getElementById('canvassample');
	if ( ! canvas || ! canvas.getContext) {
		document.getElementById('ms').innerHTML = "This browser is not supported."
		return false;
	}
	if (!draw_allow && oval_size <0) {
		return;
	};
	if (oval_size < 0) {
		oval_size = _oval_size;
		setPos();
		setColors();
	}
	/* 2Dコンテキスト */
	var ctx = canvas.getContext('2d');
	ctx.lineJoin = "bevel";
	ctx.clearRect(0,0,w_size,h_size);
	ctx.strokeRect(0,0,w_size,h_size);
	for (var i=0;i<_count;i++) {
		ctx.beginPath();
		ctx.fillStyle = _color[i];
		ctx.arc(posX[i], posY[i], oval_size, 0, Math.PI*2, false);
		ctx.fill();
		ctx.closePath();
	}
	oval_size = oval_size - 1;
};

function mouseClicked() {
	draw_allow = true;
	setPos();
	setColors();
};

function mouseMove(x,y) {
	mouse_X = x;
	mouse_Y = y;
	document.getElementById('debug').innerHTML = "x="+mouse_X + " y="+mouse_Y
};

function mouseUp() {
	draw_allow = false;
};

function setPos() {
	for (var i=0;i<_count;i++) {
		if ((Math.random() * 2) < 1) {
			posX[i] = mouse_X - (Math.random() * padding);
		} else {
			posX[i] = mouse_X + (Math.random() * padding);
		}
		if ((Math.random() * 2)  < 1) {
			posY[i] = mouse_Y - (Math.random() * padding);
		} else {
			posY[i] = mouse_Y + (Math.random() * padding);
		}
	}
};

function setColor(index) {
	var color = Math.floor(Math.random() * 0xFFFFFF).toString(16);	//#RRGGBBを取得
	for(count = color.length; count < 6; count++){
		color = "0" + color;     				//上位に0を補完する
	}
	_color[index] = "#" + color;
	};
	
function setColors() {
	for (var i=0;i<_count;i++) {
		setColor(i);
	}
	};

function change() {
	_oval_size = parseInt(document.getElementById('size').value);
	_count = parseInt(document.getElementById('count').value);
	padding = parseInt(document.getElementById('padding').value);
	setPos()
	setColors();
}
</script>
<div id="debug"> </div>
<p>
<form>
	size:<input type="text" id="size" value="15"  onchange="change()"></input>
	count:<input type="text" id="count" value="12" onchange="change()"></input>
	padding:<input type="text" id="padding" value="160" onchange="change()"></input>
</form>
</p>
<p>Example2: HTML5 canvas</p>
<p><a href="http://www.html5.jp/canvas/ref.html">http://www.html5.jp/canvas/ref.html</a></p>
<p><a href="http://d.hatena.ne.jp/juntk/20100422/1271867363">またまたcanvasいじり。</a></p>
</body>
</html>