javascript結(jié)合html5 canvas實現(xiàn)(可調(diào)畫筆顏色/粗細/橡皮)的涂鴉板

更新時間：2013年04月27日 17:14:48 作者：

js+html5 canvas實現(xiàn)的涂鴉畫板特效,可調(diào)畫筆顏色|粗細|橡皮,可以保存涂鴉效果為圖片編碼，測試了下還不錯，感興趣的朋友可以參考下

js+html5 canvas實現(xiàn)的涂鴉畫板特效,可調(diào)畫筆顏色|粗細|橡皮,可以保存涂鴉效果為圖片編碼，非常適合學(xué)習(xí)html5的canvas,必須支持html5的瀏覽器才能看到效果。

 
<!doctype html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>javascript結(jié)合html5 canvas實現(xiàn)的涂鴉板 - 分享JavaScript-sharejs.com</title> 
<meta name="Copyright" content="JavaScript分享網(wǎng) http://www.sharejs.com/" /> 
<meta name="description" content="javascript結(jié)合html5 canvas實現(xiàn)的涂鴉板,JavaScript分享網(wǎng)，js腳本，網(wǎng)頁特效，網(wǎng)頁模板，png圖標，矢量圖下載" /> 
<meta content="JavaScript,分享,JavaScript代碼,Ajax,jQuery,網(wǎng)頁模板,PNG圖標，矢量圖" name="keywords" /> 
</head> 
<body> 
<style> 
*{margin:0;padding:0;} 
.fa{width:740px;margin:0 auto;} 
.top{margin:20px 0;} 
.top input{width:25px;height:25px;border:1px solid #fff;border-radius:4px;background:#ddd;} 
.top .i1{background:#000000;} 
.top .i2{background:#FF0000;} 
.top .i3{background:#80FF00;} 
.top .i4{background:#00FFFF;} 
.top .i5{background:#808080;} 
.top .i6{background:#FF8000;} 
.top .i7{background:#408080;} 
.top .i8{background:#8000FF;} 
.top .i9{background:#CCCC00;} 
#canvas{background:#eee;cursor:default;} 
.font input{font-size:14px;} 
.top .grea{background:#aaa;} 
</style> 
</head> 
<body> 
<div class="fa"> 
<div class="top"> 
<div id="color"> 
請選擇畫筆顏色： 
<input class="i1" type="button" value="" /> 
<input class="i2" type="button" value="" /> 
<input class="i3" type="button" value="" /> 
<input class="i4" type="button" value="" /> 
<input class="i5" type="button" value="" /> 
<input class="i6" type="button" value="" /> 
<input class="i7" type="button" value="" /> 
<input class="i8" type="button" value="" /> 
<input class="i9" type="button" value="" /> 
</div> 
<div class="font" id="font"> 
請選擇畫筆的寬度： 
<input type="button" value="細" /> 
<input type="button" value="中" class="grea"/> 
<input type="button" value="粗" /> 
</div> 
<div> 
<span id="error">如果有錯誤，請使用橡皮擦：</span> 
<input id="eraser" style="width:60px;font-size:14px;"type="button" value="橡皮擦" /> 
</div> 
<input id="clear" type="button" value="清除畫布" style="width:80px;"/> 
<input id="revocation" type="button" value="撤銷" style="width:80px;"/> 
<input id="imgurl" type="button" value="導(dǎo)出圖片路徑" style="width:80px;"/> 
</div> 
<canvas id="canvas" width="740" height="420">您的瀏覽器不支持 canvas 標簽</canvas> 
<div id="div1"></div> 
</div> 
<div id="html"> 
</div> 
<script> 
(function(){ 
var paint={ 
init:function() 
{ 
this.load(); 
}, 
load:function() 
{ 
this.x=[];//記錄鼠標移動是的X坐標 
this.y=[];//記錄鼠標移動是的Y坐標 
this.clickDrag=[]; 
this.lock=false;//鼠標移動前，判斷鼠標是否按下 
this.isEraser=false; 
//this.Timer=null;//橡皮擦啟動計時器 
//this.radius=5; 
this.storageColor="#000000"; 
this.eraserRadius=15;//擦除半徑值 
this.color=["#000000","#FF0000","#80FF00","#00FFFF","#808080","#FF8000","#408080","#8000FF","#CCCC00"];//畫筆顏色值 
this.fontWeight=[2,5,8]; 
this.$=function(id){return typeof id=="string"?document.getElementById(id):id;}; 
this.canvas=this.$("canvas"); 
if (this.canvas.getContext) { 
} else { 
alert("您的瀏覽器不支持 canvas 標簽"); 
return; 
} 
this.cxt=this.canvas.getContext('2d'); 
this.cxt.lineJoin = "round";//context.lineJoin - 指定兩條線段的連接方式 
this.cxt.lineWidth = 5;//線條的寬度 
this.iptClear=this.$("clear"); 
this.revocation=this.$("revocation"); 
this.imgurl=this.$("imgurl");//圖片路徑按鈕 
this.w=this.canvas.width;//取畫布的寬 
this.h=this.canvas.height;//取畫布的高 
this.touch =("createTouch" in document);//判定是否為手持設(shè)備 
this.StartEvent = this.touch ? "touchstart" : "mousedown";//支持觸摸式使用相應(yīng)的事件替代 
this.MoveEvent = this.touch ? "touchmove" : "mousemove"; 
this.EndEvent = this.touch ? "touchend" : "mouseup"; 
this.bind(); 
}, 
bind:function() 
{ 
var t=this; 
/*清除畫布*/ 
this.iptClear.onclick=function() 
{ 
t.clear(); 
}; 
/*鼠標按下事件，記錄鼠標位置，并繪制，解鎖lock，打開mousemove事件*/ 
this.canvas['on'+t.StartEvent]=function(e) 
{ 
var touch=t.touch ? e.touches[0] : e; 
var _x=touch.clientX - touch.target.offsetLeft;//鼠標在畫布上的x坐標，以畫布左上角為起點 
var _y=touch.clientY - touch.target.offsetTop;//鼠標在畫布上的y坐標，以畫布左上角為起點 
if(t.isEraser) 
{ 
/* 
t.cxt.globalCompositeOperation = "destination-out"; 
t.cxt.beginPath(); 
t.cxt.arc(_x, _y,t.eraserRadius, 0, Math.PI * 2); 
t.cxt.strokeStyle = "rgba(250,250,250,0)"; 
t.cxt.fill(); 
t.cxt.globalCompositeOperation = "source-over"; 
*/ 
t.resetEraser(_x,_y,touch); 
}else 
{ 
t.movePoint(_x,_y);//記錄鼠標位置 
t.drawPoint();//繪制路線 
} 
t.lock=true; 
}; 
/*鼠標移動事件*/ 
this.canvas['on'+t.MoveEvent]=function(e) 
{ 
var touch=t.touch ? e.touches[0] : e; 
if(t.lock)//t.lock為true則執(zhí)行 
{ 
var _x=touch.clientX - touch.target.offsetLeft;//鼠標在畫布上的x坐標，以畫布左上角為起點 
var _y=touch.clientY - touch.target.offsetTop;//鼠標在畫布上的y坐標，以畫布左上角為起點 
if(t.isEraser) 
{ 
//if(t.Timer)clearInterval(t.Timer); 
//t.Timer=setInterval(function(){ 
t.resetEraser(_x,_y,touch); 
//},10); 
} 
else 
{ 
t.movePoint(_x,_y,true);//記錄鼠標位置 
t.drawPoint();//繪制路線 
} 
} 
}; 
this.canvas['on'+t.EndEvent]=function(e) 
{ 
/*重置數(shù)據(jù)*/ 
t.lock=false; 
t.x=[]; 
t.y=[]; 
t.clickDrag=[]; 
clearInterval(t.Timer); 
t.Timer=null; 
}; 
this.revocation.onclick=function() 
{ 
t.redraw(); 
}; 
this.changeColor(); 
this.imgurl.onclick=function() 
{ 
t.getUrl(); 
}; 
/*橡皮擦*/ 
this.$("eraser").onclick=function(e) 
{ 
t.isEraser=true; 
t.$("error").style.color="red"; 
t.$("error").innerHTML="您已使用橡皮擦！"; 
}; 
}, 
movePoint:function(x,y,dragging) 
{ 
/*將鼠標坐標添加到各自對應(yīng)的數(shù)組里*/ 
this.x.push(x); 
this.y.push(y); 
this.clickDrag.push(y); 
}, 
drawPoint:function(x,y,radius) 
{ 
for(var i=0; i < this.x.length; i++)//循環(huán)數(shù)組 
{ 
this.cxt.beginPath();//context.beginPath() , 準備繪制一條路徑 
if(this.clickDrag[i] && i){//當是拖動而且i!=0時，從上一個點開始畫線。 
this.cxt.moveTo(this.x[i-1], this.y[i-1]);//context.moveTo(x, y) , 新開一個路徑，并指定路徑的起點 
}else{ 
this.cxt.moveTo(this.x[i]-1, this.y[i]); 
} 
this.cxt.lineTo(this.x[i], this.y[i]);//context.lineTo(x, y) , 將當前點與指定的點用一條筆直的路徑連接起來 
this.cxt.closePath();//context.closePath() , 如果當前路徑是打開的則關(guān)閉它 
this.cxt.stroke();//context.stroke() , 繪制當前路徑 
} 
}, 
clear:function() 
{ 
this.cxt.clearRect(0, 0, this.w, this.h);//清除畫布，左上角為起點 
}, 
redraw:function() 
{ 
/*撤銷*/ 
this.cxt.restore(); 
}, 
preventDefault:function(e){ 
/*阻止默認*/ 
var touch=this.touch ? e.touches[0] : e; 
if(this.touch)touch.preventDefault(); 
else window.event.returnValue = false; 
}, 
changeColor:function() 
{ 
/*為按鈕添加事件*/ 
var t=this,iptNum=this.$("color").getElementsByTagName("input"),fontIptNum=this.$("font").getElementsByTagName("input"); 
for(var i=0,l=iptNum.length;i<l;i++) 
{ 
iptNum[i].index=i; 
iptNum[i].onclick=function() 
{ 
t.cxt.save(); 
t.cxt.strokeStyle = t.color[this.index]; 
t.storageColor=t.color[this.index]; 
t.$("error").style.color="#000"; 
t.$("error").innerHTML="如果有錯誤，請使用橡皮擦："; 
t.cxt.strokeStyle = t.storageColor; 
t.isEraser=false; 
} 
} 
for(var i=0,l=fontIptNum.length;i<l;i++) 
{ 
t.cxt.save(); 
fontIptNum[i].index=i; 
fontIptNum[i].onclick=function() 
{ 
t.changeBackground(this.index); 
t.cxt.lineWidth = t.fontWeight[this.index]; 
t.$("error").style.color="#000"; 
t.$("error").innerHTML="如果有錯誤，請使用橡皮擦："; 
t.isEraser=false; 
t.cxt.strokeStyle = t.storageColor; 
} 
} 
}, 
changeBackground:function(num) 
{ 
/*添加畫筆粗細的提示背景顏色切換，灰色為當前*/ 
var fontIptNum=this.$("font").getElementsByTagName("input"); 
for(var j=0,m=fontIptNum.length;j<m;j++) 
{ 
fontIptNum[j].className=""; 
if(j==num) fontIptNum[j].className="grea"; 
} 
}, 
getUrl:function() 
{ 
this.$("html").innerHTML=this.canvas.toDataURL(); 
}, 
resetEraser:function(_x,_y,touch) 
{ 
/*使用橡皮擦-提醒*/ 
var t=this; 
//this.cxt.lineWidth = 30; 
/*source-over 默認,相交部分由后繪制圖形的填充(顏色,漸變,紋理)覆蓋,全部瀏覽器通過*/ 
t.cxt.globalCompositeOperation = "destination-out"; 
t.cxt.beginPath(); 
t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2); 
t.cxt.strokeStyle = "rgba(250,250,250,0)"; 
t.cxt.fill(); 
t.cxt.globalCompositeOperation = "source-over" 
} 
}; 
paint.init(); 
})(); 
</script> 
<div style="clear:both"></div> 
</body> 
</html> 