canvas实现画板涂鸦动画

来源:https://www.sucaihuo.com/js/2150.html 2017-06-12 07:28浏览(945) 收藏

这是一个HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大,有回撤和清空画板的操作
canvas实现画板涂鸦动画
分类:html5 > canvas 难易:初级
查看演示 下载资源 下载积分: 30 积分
关注公众号,免费赠送安装视频教程、环境和学习视频,后面会不断更新。点击联系客服
//设置画笔
	_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');
		}
	},
标签: canvas涂鸦画板
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2