canvas实现画板涂鸦动画

//设置画笔
	_setCanvasStyle:function(){
		this.context.lineWidth=this.confing.lineWidth;
		this.context.shadowBlur=this.confing.shadowBlur;
		this.context.shadowColor=this.confing.lineColor;
		this.context.strokeStyle=this.confing.lineColor;
	},
	//设置颜色
	setColor:function(){
		this.colorDiv.onclick=this.bind(this,this._setColor);
	},
	_setColor:function(e){
		var t=e.target;
		if(t.nodeName.toLowerCase()=="li"){
			this.confing.lineColor=t.style.backgroundColor;
			$('.js-border-color').removeClass('js-border-color');
			$(t).addClass('js-border-color');
		}
	},
	//设置画笔大小
	setBrush:function(){
		this.brushDiv.onclick=this.bind(this,this._setBrush);
	},
	_setBrush:function(e){
		var t=e.target;
		if(t.nodeName.toLowerCase()=="span"){
			if(t.className.indexOf("small-brush")>=0){
				this.confing.lineWidth=3;
			}else if(t.className.indexOf("middle-brush")>=0){
				this.confing.lineWidth=6;
			}else if(t.className.indexOf("big-brush")>=0){
				this.confing.lineWidth=12;
			}
			$('.js-bg-color').removeClass('js-bg-color');
			$(t).addClass('js-bg-color');
		}
	},
	//判断是否已涂鸦,修改按钮状态
	_isDraw:function(){
		if(this.preDrawAry.length){
			$('.return-control').addClass('js-return-control');
			$('.return-control').removeClass('return-control');
			$('.empty-control').addClass('js-empty-control');
			$('.empty-control').removeClass('empty-control');
		}else{
			return false;	
		}
	},
	//点击上一步-改变涂鸦当前状态
	preClick:function(){
		var pre=this.controlDiv.getElementsByTagName("span")[0];
		pre.onclick=this.bind(this,this._preClick);
	},
	_preClick:function(){
		if(this.preDrawAry.length>0){
			var popData=this.preDrawAry.pop();
			var midData=this.middleAry[this.preDrawAry.length+1];
			this.nextDrawAry.push(midData);
			this.context.putImageData(popData,0,0);
		}
		if(this.nextDrawAry.length){
			$('.next-control').addClass('js-next-control');
			$('.next-control').removeClass('next-control');
		}
		if(this.preDrawAry.length==0){
			$('.js-return-control').addClass('return-control');
			$('.return-control').removeClass('js-return-control');
		}
	},