お絵かきできるSNSを作りたい後半戦、１つ前に戻すを作っていきます。

筆跡が分るようにjsonで座標を逐一保存しようかとも考えたのですが、管理が大変そうだったので１ストローク毎にcanvasの中身をスクリーンショットを撮る感じにしました。

まず、対処のボタンにイベントを追加します。

<a href="#" class="btn" onclick="doPrevCanvas();">１つ前に戻す</a>

ローカルストレージを用意し、レイヤー1とレイヤー2をそれぞれ１ストローク毎に保存していきます。

// ストレージの初期化
var myStorage = localStorage;

function initLocalStorage(){
	myStorage.setItem("__layer", JSON.stringify([]));
	myStorage.setItem("__layer2", JSON.stringify([]));
}

function setLocalStoreage(){
	var png = $("#canvas")[0].toDataURL();
	var logs = JSON.parse(myStorage.getItem("__layer"));
	setTimeout(function(){
		logs.unshift({png});
		myStorage.setItem("__layer", JSON.stringify(logs));
	}, 0);
	var png2 = $("#canvas2")[0].toDataURL();
	var logs2 = JSON.parse(myStorage.getItem("__layer2"));
	setTimeout(function(){
		logs2.unshift({png2});
		myStorage.setItem("__layer2", JSON.stringify(logs2));
	}, 0);
}

function doPrevCanvas(){
	var logs = JSON.parse(myStorage.getItem("__layer"));
	if(logs.length > 0){
		logs.shift();
		setTimeout(function(){
			myStorage.setItem("__layer", JSON.stringify(logs));
			ct.clearRect(0, 0, $("#canvas").width(), $("#canvas").height());
			if (logs.length == 0) {
				draw("canvas",logs["png"]);
			} else {
				draw("canvas",logs[0]["png"]);
			}
		}, 0);
	}
	var logs2 = JSON.parse(myStorage.getItem("__layer2"));
	if(logs2.length > 0){
		logs2.shift();
		setTimeout(function(){
			myStorage.setItem("__layer2", JSON.stringify(logs2));
			ct2.clearRect(0, 0, $("#canvas2").width(), $("#canvas2").height());
			if (logs2.length == 0) {
				draw("canvas2",logs2["png2"]);
			} else {
				draw("canvas2",logs2[0]["png2"]);
			}
		}, 0);
	}
}

function draw(target,src) {
	var img = new Image();
	img.src = src;
	img.onload = function() {
		if (target == "canvas"){
			ct.drawImage(img, 0, 0);
		} else {
			ct2.drawImage(img, 0, 0);
		}
	}
}

あとは初期化の中でローカルストレージの用意し、線の書き終わりにレイヤー１と２の情報を保存します。

次回は小技（ショートカットの実装）を予定しています。
また気が向いたときにお会いしましょう。

次：お絵かきできるSNSを作りたい！11
最初：お絵かきできるSNSを作りたい！