BlankTar

about | blog | works | photo

HTML5のcanvasは結構いい感じで、結構遊べるようです。Flashがいらなくなるって話も頷けるね。

実際に動くサンプルがこんなん。

ぐりぐり書ける。結構いい感じ。今のところ消せないけど。

コードはこんなん。
<html>
	<canvas width=640 height=480 style="border: 1px solid black;"></canvas>

	<script>
		var canvas = document.querySelector('canvas');
		var context = canvas.getContext('2d');

		canvas.addEventListener('mousedown', function(ev){
			context.beginPath();
			context.moveTo(ev.layerX, ev.layerY);
		});

		canvas.addEventListener('mousemove', function(ev){
			if(ev.which){
				context.lineTo(ev.layerX, ev.layerY);
				context.stroke();
			}
		});
	</script>
</html>
結構短い。

context.strokeStyle = 'red';
とか
context.strokeStyle = '#ffffff';
とかすると線の色を決められる。
太さはcontext.lineWidthに数値を入れればおっけー。
他にもかなりいろいろあるので調べてみてください。
canvasだけでもうまく使えばゲームとかがりがり作れそうな気がする。


余談ですが、
var canvas = document.querySelector('canvas');
ってやつはHTML5で追加されたAPIらしいです。
jQueryでの
var canvas = $('canvas')[0];
と等価。

document.querySelector('#thisisid');
とか
document.querySelector('.classname');
とか出来る。便利。
< mercurialが入ってない共有サーバにデプロイするのにmercurial使いたい。 HTML5のcanvasの中身をコピー >