HTML5のcanvasの描画状態をデータとして取得してcanvasに再出力するまで！ - プログラミングで飯を食え。腕をあげたきゃ備忘録！

サクウェブＴＶはコチラ↓↓↓

お絵かきツールなどを作るとき「戻る」ボタンなどを設置して直前の描画状態に戻したいような場合に使用できるのが、

getImageData()

putImageData()

です。

前者は、現在のcanvasの描画状態をデータとして取得します。

後者は、getImageData()で取得した描画状態をcanvasに再現します。

使用方法は以下です。

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<script type="text/javascript" src="./js/jquery.js"></script>
		<script type="text/javascript" src="./js/script.js"></script>
		<title>描画</title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="300"></canvas>
	</body>
</html>

script.js

var canvas = $("#canvas")[0];
var c = canvas.getContext("2d");
c.beginPath();
c.moveTo(20,20);
c.lineTo(200,20);
c.lineTo(200,200);
c.lineTo(20,200);
c.closePath();
c.fill();

これで以下のような正方形が描画されます。

f:id:senoway:20130605133329j:plain

さて、この描画状態のデータを取得すると

script.js

var canvas = $("#canvas")[0];
var c = canvas.getContext("2d");
c.beginPath();
c.moveTo(20,20);
c.lineTo(200,20);
c.lineTo(200,200);
c.lineTo(20,200);
c.closePath();
c.fill();
var imageData = c.getImageData(0,0,220,220);

これでimageDataの中にgetImageData()で指定した範囲の描画データが代入されました。

ちなみに、getImageData()はcanvasの一部を切り取るようなイメージです。

getImageData(x,y,w,h)の引数は

１．x：どこから切り取り始めるかのｘ座標

２．y：どこから切り取り始めるかのｙ座標

３．w：切り取る横幅

４．h：切り取る縦幅

今回は(0,0,220,220)ですから、canvasの左上の端から縦横220pxを切り取るイメージですね。

そしてこれを

script.js

var canvas = $("#canvas")[0];
var c = canvas.getContext("2d");
c.beginPath();
c.moveTo(20,20);
c.lineTo(200,20);
c.lineTo(200,200);
c.lineTo(20,200);
c.closePath();
c.fill();
var imageData = c.getImageData(0,0,220,220);
c.putImageData(imageData,50,50);

とすればimageDataに格納された描画データがcanvasの(x,y) = (50,50)の座標に再描画されるというわけです。

実行結果は以下のようになります。

f:id:senoway:20130605134647j:plain