BlankTar

about | blog | works | photo

先ほどの記事に引き続いてHTML5のcanvasです。お絵描きをしたcanvasの中身を別のcanvasにコピーしよう、と言う感じ。

とりあえずサンプル。

左のカンバスは絵を描ける。コピーってボタンをクリックすると内容をコピーできる。

<html>
	<canvas width=320 height=240 style="border: 1px solid black" id=alpha></canvas>
	<canvas width=320 height=240 style="border: 1px solid black" id=beta></canvas>
	<button>コピー</button>

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

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

		alpha.addEventListener('mousemove', function(ev){
			if(ev.which){
				context.lineTo(ev.layerX, ev.layerY);
				context.stroke();
			}
		});

		document.querySelector('button').addEventListener('click', function(ev){
			var image = context.getImageData(0, 0, alpha.width, alpha.height);
			beta.getContext('2d').putImageData(image, 0, 0);
		});
	</script>
</html>
ソースコードはこんな。
contextのgetImageDataでカンバスの中身を画像化して、そいつをputImageDataで貼り付ける。
結構お手軽?
< HTML5のcanvasでお絵描きしてみた。 linuxのコマンドだけでcsvを取り回してみる >