HTML5Canvas中的save和restore

 

今天被人问起save 跟 restore 的作用，其实之前理解不是很深。 
save是保存当前绘图状态，并把它压入一个堆栈 
restore是恢复上次保存的绘图状态，从堆栈弹出。 
关键在于绘图状态，它是指Canvas的平移、放缩、旋转、错切、裁剪等操作或者颜色、线条等样式。 
堆栈原理，restore次数不能多于save。 
那一个100*100的画布 

window.onload = function(){
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	context.translate(50, 50);
	context.save();              //坐标原点移到画布中心，并保存这个状态
	context.rotate(Math.PI/2);    //旋转90度
	context.beginPath();
	context.moveTo(0, -50);
	context.lineTo(-50, 0);
	context.moveTo(0, -50);
	context.lineTo(50, 0);
	context.moveTo(0, -50);
	context.lineTo(0, 50);
	context.closePath();          //画一个向右的箭头
	context.restore();
	context.fillRect(40, 40, 10, 10);  //画一点，restore后点在右下角，没有restore刚点在左下角，如图
	context.stroke();
}