HTML5 CANVAS中的SAVE和RESTORE的原理详解和应用

/**
		 *save是保存当前绘图状态，并把它压入一个堆栈 restore是恢复上次保存的绘图状态，从堆栈弹出。 
		关键在于绘图状态，它是指Canvas的平移、放缩、旋转、错切、裁剪等操作或者颜色、线条等样式。  
		 */
		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刚点在左下角(因restore到save前的状态【那个状态是画布没有旋转90度的，
			//此时，中心点在中间，起点40、40处画方形：fillRect(40, 40..就是在左下角的位置了	】)
			context.stroke();
		}