Html5 canvas-仿百度贴吧涂鸦画图

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas-仿百度贴吧涂鸦</title>
<style type="text/css"> 
html,body,canvas,div,ul,li,h5,p{ margin:0; padding:0;-moz-user-select:none; -webkit-user-select:none; }
img{ border:1px #ccc solid;}
ul,li{ list-style:none;}
.wrap{ width:740px; margin:20px auto 5px; border:1px #ccc solid; overflow:hidden;}
.fl{ float:left; display:inline;}
#canvas{ border-right:1px #ccc solid; cursor:crosshair;}
#control{ width:130px; height:400px; margin-left:4px;}
#control div{ padding:5px;}
#canvas-color ul{ overflow:hidden;}
#canvas-color ul li{ float:left; display:inherit; width:13px; height:13px; border:3px #fff solid; margin:8px; cursor:pointer;}
#canvas-color ul li.js-border-color{ border-color:#000;}
#canvas-brush span{ display:inline-block; width:10px; height:10px; margin-left:10px; background:url(//ku.shouce.ren/files/images/201601/56a0b1604d76e.png); cursor:pointer;}
#canvas-brush span.small-brush{ background-position:-6px -6px;}
#canvas-brush span.middle-brush{ background-position:-31px -6px;}
#canvas-brush span.big-brush{ background-position:-56px -6px;}
#canvas-brush span.js-bg-color{ background-color:#aaa;}
#canvas-control span{ display:inline-block; width:20px; height:15px; margin-left:10px; background:url(//ku.shouce.ren/files/images/201601/56a0b160653e8.png); cursor:pointer;}
#canvas-control span.return-control{ background-position:-2px -148px;}
#canvas-control span.next-control{ background-position:right -168px;}
#canvas-control span.empty-control{ background-position:-2px -188px;}
#canvas-control span.js-return-control{ background-position:-2px -209px;}
#canvas-control span.js-next-control{ background-position:right -230px;}
#canvas-control span.js-empty-control{ background-position:-2px -251px;}
#imgDiv{ text-align:center;}
</style>
</head>
<body>
<div class="wrap">
<canvas id="canvas" class="fl" width="600" height="400"></canvas>
    <div id="control" class="fl">
    	<div id="canvas-color">
       		<h5>画笔颜色</h5>
        	<ul>
            	<li style="background:#fef4ac"></li>
                <li style="background:#0018ba"></li>
                <li style="background:#ffc200"></li>
                <li style="background:#f32f15"></li>
                <li style="background:#cccccc"></li>
                <li style="background:#5ab639"></li>
            </ul>
        </div>
        <div id="canvas-brush">
        	<h5>画笔大小</h5>
        	<span class="small-brush"></span>
            <span class="middle-brush"></span>
            <span class="big-brush"></span>
        </div>
        <div id="canvas-control">
        	<h5>操作</h5>
        	<span title="上一步" class="return-control"></span>
            <span title="下一步" class="next-control"></span>
            <span title="清除" class="empty-control"></span>
        </div>
        <div id="canvas-drawImage">
        	<h5>生成图像</h5>
        	<p><button class="drawImage">生成图像</button></p>
        </div>
    </div>
</div>
<div id="imgDiv"></div>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript"> 
var doc=document,
canvas=doc.getElementById('canvas'),
colorDiv=doc.getElementById('canvas-color'),
brushDiv=doc.getElementById('canvas-brush'),
controlDiv=doc.getElementById('canvas-control'),
drawImageDiv=doc.getElementById('canvas-drawImage'),
imgDiv=doc.getElementById('imgDiv');
function Canvas(){
this.init.apply(this,arguments);
}
Canvas.prototype={
	//存储当前表面状态数组-上一步
	preDrawAry:[],
	//存储当前表面状态数组-下一步
	nextDrawAry:[],
	//中间数组
	middleAry:[],
	//配置参数
	confing:{
		lineWidth:1,
		lineColor:"blue",
		shadowBlur:2
	},
	init:function(oCanvas,oColor,oBrush,oControl,oDrawImage,imgDiv){
		this.canvas=oCanvas;
		this.context=oCanvas.getContext('2d');
		this.colorDiv=oColor;
		this.brushDiv=oBrush;
		this.controlDiv=oControl;
		this.drawImageDiv=oDrawImage;
		this.imgDiv=imgDiv;
		this._initDraw();
		this._draw(oCanvas);
		this.setColor();
		this.setBrush();
		this.preClick();
		this.nextClick();
		this.clearClick();
		this.drawImage(oCanvas);
	},
	_initDraw:function(){
		var preData=this.context.getImageData(0,0,600,400);
		//空绘图表面进栈
		this.middleAry.push(preData);
	},
	//涂鸦主程序
	_draw:function(oCanvas,context){
		var _this=this;
		oCanvas.onmousedown=function(e){
			var x=e.clientX,
			y=e.clientY,
			left=this.parentNode.offsetLeft,
			top=this.parentNode.offsetTop,
			canvasX=x-left,
			canvasY=y-top;
			_this._setCanvasStyle();
			//清除子路径
			_this.context.beginPath();
			_this.context.moveTo(canvasX,canvasY);
			//当前绘图表面状态
			var preData=_this.context.getImageData(0,0,600,400);
			//当前绘图表面进栈
			_this.preDrawAry.push(preData);
			document.onmousemove=function(e){
				var x2=e.clientX,
					y2=e.clientY,
					t=e.target,
					canvasX2=x2-left,
					canvasY2=y2-top;
				if(t==oCanvas){
					_this.context.lineTo(canvasX2,canvasY2);
					_this.context.stroke();
				}else{
					_this.context.beginPath();
				}
			}
			document.onmouseup=function(e){
				var t=e.target;
				if(t==oCanvas){
					//当前绘图表面状态
					var preData=_this.context.getImageData(0,0,600,400);
					if(_this.nextDrawAry.length==0){
						//当前绘图表面进栈
						_this.middleAry.push(preData);
					}else{
						_this.middleAry=[];
						_this.middleAry=_this.middleAry.concat(_this.preDrawAry);
						_this.middleAry.push(preData);
						_this.nextDrawAry=[];
						$('.js-next-control').addClass('next-control');
						$('.next-control').removeClass('js-next-control');
					}
					
					_this._isDraw();	
				}
				this.onmousemove=null;	
			}
		}
	},
	//设置画笔
	_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');
		}
	},
	//点击下一步-改变涂鸦当前状态
	nextClick:function(){
		var next=this.controlDiv.getElementsByTagName("span")[1];
		next.onclick=this.bind(this,this._nextClick);
	},
	_nextClick:function(){
		if(this.nextDrawAry.length){
			var popData=this.nextDrawAry.pop();
			var midData=this.middleAry[this.middleAry.length-this.nextDrawAry.length-2];
			this.preDrawAry.push(midData);
			this.context.putImageData(popData,0,0);
		}
		if(this.preDrawAry.length){
			$('.return-control').addClass('js-return-control');
			$('.return-control').removeClass('return-control');
		}
		
		if(this.nextDrawAry.length==0){
			$('.js-next-control').addClass('next-control');
			$('.next-control').removeClass('js-next-control');
		}
	},
	//清空
	clearClick:function(){
		var clear=this.controlDiv.getElementsByTagName("span")[2];
		clear.onclick=this.bind(this,this._clearClick);
	},
	_clearClick:function(){
		var data=this.middleAry[0];
		this.context.clearRect(0,0,this.context.canvas.width,this.context.canvas.height);
		this.preDrawAry=[];
		this.nextDrawAry=[];
		this.middleAry=[this.middleAry[0]];
		this.controlDiv.getElementsByTagName("span")[0].className="return-control";
		this.controlDiv.getElementsByTagName("span")[1].className="next-control";
		this.controlDiv.getElementsByTagName("span")[2].className="empty-control";
	},
	//生成图像
	drawImage:function(){
		var btn=this.drawImageDiv.getElementsByTagName("button")[0];
		btn.onclick=this.bind(this,this._drawImage);
	},
	_drawImage:function(){
		var url=this.canvas.toDataURL('image/png'),
		 	img=new Image();
		img.src=url;
		this.imgDiv.innerHTML="";
		this.imgDiv.appendChild(img);
	},
	bind:function(obj,handler){
		return function(){
			return handler.apply(obj,arguments);	
		}
	}
}
new Canvas(canvas,colorDiv,brushDiv,controlDiv,drawImageDiv,imgDiv);
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Html5 canvas-仿百度贴吧涂鸦画图

分类

HTML5代码

描述

Html5canvas-仿百度贴吧涂鸦画图，正在研究canvas的朋友，或许会对你有所帮助。本效果中，部分功能的实现是和JavaScript一起完成的。