html5+javascript制作簡易畫板附圖

更新時間：2014年04月25日 15:02:47 作者：

這篇文章主要介紹了使用html5+javascript制作的簡易畫板,需要的朋友可以參考下

見圖：

代碼如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<meta http-equiv="content-type" Content="text/html;charset=utf-8"> 
<head> 

<title>簡易畫板</title> 

<style> 
#eraseImg{ /*橡皮樣式*//**/ 
border:solid; 
color:gray; 
border-radius: 118px; 
width: 5px; 
height: 5px; 
position: absolute; 
display: none; 

} 
.eraseSeries{ /*橡皮大小單選按鈕組的排列，此div不單獨(dú)占一行*/ 
display: inline-block; 
} 

</style> 
<script src="jquery-1.7.1.js"></script> 
<script> 

var c;//獲取到的2d畫板 
var painting = false;//判斷是否正在繪畫，即鼠標(biāo)左鍵是否長按下去 
var canvas;//畫板 
$(function(){ 

$(".eraseSeries").hide();//初始狀態(tài)單選按鈕組隱藏 

canvas=document.getElementById("myCanvas"); 
c=canvas.getContext("2d"); 
c.lineCap="round";//設(shè)置筆跡邊角，否則筆跡會出現(xiàn)斷層 
c.strokeStyle="black";//筆跡的顏色 
c.lineWidth=5;//筆跡的粗細(xì) 
$("#color").change(function(){//筆跡顏色發(fā)生改變時 
if(eraseFlag==true)//處在擦皮狀態(tài) 
{ 
$("#erase").trigger("click");//自動觸發(fā)橡皮的點(diǎn)擊事件，以返回到畫筆狀態(tài) 
} 
c.strokeStyle=$(this).val();//設(shè)置畫筆狀態(tài) 
c.lineWidth=$(this).val(); 

}); 

$("#fontSize").change(function(){//畫筆粗細(xì)發(fā)生改變 
if(eraseFlag==true)//同上 
{ 
$("#erase").trigger("click"); 
} 
c.lineWidth=$(this).val(); 
c.strokeStyle=$("#color").val(); 
//eraseFlag=false; 
}); 

$(".eraseSeries").click(function(){//橡皮大小發(fā)生改變 
var size=$('input[name="eraseSize"]:checked').val();//獲取到橡皮單選按鈕組的選中值 
sizeE=size;//將該值傳到全局變量上，sizeE需要用來控制橡皮樣式的位置 
c.lineWidth=size; 
$("#eraseImg").css({"width" :size+"px","height":size+"px"});//橡皮樣式大小發(fā)生改變 
}); 

$("#erase").toggle(function(){//橡皮按鈕的點(diǎn)擊翻轉(zhuǎn)事件 
c.save();//保持上次設(shè)置的狀態(tài) 
eraseFlag=true; 
c.strokeStyle="white"; 

$("#erase").text("畫筆");//改變按鈕上的文字 
$(".eraseSeries").show('fast');//橡皮單選組出現(xiàn) 
// $("#eraseImg").show(); 
sizeE=5; 


},function(){ 
eraseFlag=false; 
$("#erase").text("橡皮"); 
$(".eraseSeries").hide('fast'); 
c.restore();//恢復(fù)上次畫筆的狀態(tài)（包括顏色，粗細(xì)等） 
}); 


//setInterval(paint,2); 

}); 

var p_x;//上次鼠標(biāo)位置 
var p_y; 
var p_x_now;//當(dāng)前瞬間鼠標(biāo)位置 
var p_y_now; 
var eraseFlag=false; 
var sizeE;//橡皮大小 

$(document).mousedown(function(e){//鼠標(biāo)按下觸發(fā)事件 


// alert(sizeE); 
p_x= e.clientX;//獲取位置，并置為上次鼠標(biāo)位置 
p_y= e.clientY; 
painting = true;//畫筆啟動標(biāo)志 

}); 
$(document).mousemove(function(e){//鼠標(biāo)移動觸發(fā)事件 
if(eraseFlag==true&& e.clientY>30)//橡皮處在激活狀態(tài)，并且鼠標(biāo)Y的位置大于30，也即鼠標(biāo)在畫板內(nèi) 
{ 

//橡皮圖像跟隨鼠標(biāo)而動 
$("#eraseImg").animate({left: e.clientX-sizeE+"px",top: e.clientY-sizeE+"px"},0).show('fast'); 
} 
else 
{ 
$("#eraseImg").hide('fast'); 
} 
if(painting==true)//處于畫筆激活狀態(tài) 
{ 
//alert(1); 
p_x_now= e.clientX;//當(dāng)前瞬間的鼠標(biāo)位置 
p_y_now= e.clientY; 
c.beginPath();//開始路徑 
//曲線是由一段段非常小的直線構(gòu)成，計算機(jī)運(yùn)算速度很快，這是一種以直線迭代畫曲線的方式 
c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop);//移動到起始點(diǎn) 
c.lineTo(p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//從起始點(diǎn)畫直線到終點(diǎn) 

c.stroke(); 
c.closePath();//封閉路徑，這個很重要，如果路徑不封閉， 
// 那么只要canvas顏色發(fā)生改變，所有的之前畫過的顏色都發(fā)生改變 
p_x = p_x_now;//一次迭代后講當(dāng)前的瞬間坐標(biāo)值賦給上次鼠標(biāo)坐標(biāo)值 
p_y = p_y_now; 
} 

}); 

$(document).mouseup(function(e){//鼠標(biāo)松開觸發(fā)事件 

painting=false;//凍結(jié)畫筆 
}); 

</script> 
</head> 
<body> 
<div > 
<select id="color" > <!--畫筆顏色--> 
<option class="opt" value="red">紅色</option> 
<option class="opt" value="yellow">黃色</option> 
<option class="opt" value="blue">藍(lán)色</option> 
<option class="opt" value="black" selected>黑色</option> 
<option class="opt" value="green">綠色</option> 
</select> 

<select id="fontSize"> <!--畫筆大小--> 
<option value=5 selected>5</option> 
<option value=10>10</option> 
<option value=15>15</option> 
<option value=20>20</option> 
<option value=30>30</option> 
</select> 
<button id="erase">擦皮</button> <!--橡皮按鈕--> 
<div class="eraseSeries"> <!--橡皮大小--> 
<input type="radio" name="eraseSize" value="5" checked/>5 
<input type="radio" name="eraseSize" value="10"/>10 
<input type="radio" name="eraseSize" value="15"/> 15 
<input type="radio" name="eraseSize" value="20"/> 20 
<input type="radio" name="eraseSize" value="30"/>30 
</div> 
</div> 

<!--<button id="btn">btn</button>--> 
<canvas id="myCanvas" width="1420" height="780" style="border: solid"></canvas> <!--整個畫布--> 

<div id="eraseImg"> <!--橡皮形狀--> 
</div> 

</body> 
</html> 