Canvas使用css transform实现旋转放大缩小

接上面的一个功能需求做的一个demo：学生提交的答案图片老师也需要在一体机上批改，考虑到实际应用效果，答案显示如果在一体机靠上边，部分老师够不到(0.0)，然后就需要旋转画板放大和缩小，这里其实就是跟放大图片效果差不多的，但是我之前的方法是老师每操作一次放大缩小，我就重新绘制canvas，得到的结果是放大缩小的次数越多，图片清晰度直线下降，所以不行。这次改成了用css3实现了，效果不错，记录一下。

css部分：

*{margin:0;padding:0;}
		body{background: #CCCCCC;overflow: hidden;}
		.caozuo{position: absolute;right: 0;top: 0;z-index: 100;width:201px;height:300px;
			border:1px solid #fff;margin: 20px 20px 0 0;}
		.classCanvas01{border:1px solid #333;position:absolute;z-index: 2;}
		.classCanvas02{border:1px solid #333;position:absolute;z-index: 1;transform: scale(1);}
		.jindudiv{width:201px;height:50px;background: #EEEEEE;position: relative;overflow: hidden;
			text-align: center;}
		.jindudiv .span1{float: left;}
		.jindudiv .span2{float: right;}
		.jindudiv .stron{}
		.jindutiao{width:201px;height:20px;background: #E4B9B9;position: absolute;bottom:10px;
			left:0px;z-index: 2;}
		.jindutiao .tiaos{width:0;height:0;position: absolute;left:95px;top:20px;
			border-left: 5px solid transparent;border-right: 5px solid transparent;
    		border-bottom: 10px solid red;}
    	.xuanzhuantiao{width:201px;height:20px;background: #E4B9B9;position: absolute;bottom:10px;
			left:0px;z-index: 2;}
		.xuanzhuantiao .tiaos{width:0;height:0;position: absolute;left:-5px;top:20px;
			border-left: 5px solid transparent;border-right: 5px solid transparent;
    		border-bottom: 10px solid red;}
    	.lantiao1,.lantiao2{width: 201px;height: 10px;background: transparent;position: absolute;
    		bottom: -10px;left: 0px;z-index: 2;}

html部分：

<div class="caozuo" id="caozuo">
		<button onclick="loadImg()">加载图片</button>
		<button onclick="saveImg()">保存图片</button>
		<br />
		<button onclick="huanYuan()">还原操作</button>
		<button onclick="huaChange(this)">橡皮</button>
		<br />
		<div class="jindudiv">
			<span class="span1" id="suo">缩小</span>
			<strong class="stron"><strong id="beishu">0</strong>%</strong>
			<span class="span2" id="dal">放大</span>
			<div class="jindutiao" id="jindutiao">
				<div id="btnDa" class&