html5 javascript製作簡易畫板附圖_javascript技巧

見圖：

 

代碼如下：

複製代碼 代碼如下:

<script> <BR><br>var c;//取得到的2d畫板<br>var painting = false;//判斷是否正在繪畫，即滑鼠左鍵是否長按下去<BR>var canvas;//畫板<BR>$(function( ){ <BR><br>$(".eraseSeries").hide();//初始狀態單選按鈕組隱藏<br><br>canvas=document.getElementById("myCanvas"); <br>c =canvas.getContext("2d"); <BR>c.lineCap="round";//設定筆跡邊角，否則筆跡會出現斷層<BR>c.strokeStyle="black";//筆蹟的顏色<BR>c.lineWidth=5;//筆跡的粗細<BR>$("#color").change(function(){//筆跡顏色改變時<BR>if(eraseFlag==true)//處在擦皮狀態<BR>{ <BR>$("#erase").trigger("click");//自動觸發橡皮的點擊事件，以返回畫筆狀態<BR>} <BR>c.strokeStyle =$(this).val();//設定畫筆狀態<BR>c.lineWidth=$(this).val(); <BR><br>}); <br><br>$("# fontSize").change(function(){//畫筆粗細發生改變<br>if(eraseFlag==true)//同上<BR>{ <BR>$("#erase").trigger("click") ; <BR>} <BR>c.lineWidth=$(this).val(); <BR>c.strokeStyle=$("#color").val(); <BR>//eraseFlag=false; <BR>}); <BR><br>$(".eraseSeries").click(function(){//橡皮大小改變<br>var size=$('input[name="eraseSize"]:checked ').val();//取得到橡皮單選按鈕組的選取值<BR>sizeE=size;//將該值傳到全域變數上，sizeE需要用來控制橡皮樣式的位置<BR>c .lineWidth=size; <BR>$("#eraseImg").css({"width" :size "px","height":size "px"});//橡皮樣式大小改變<BR>} ); <BR><br>$("#erase").toggle(function(){//橡皮按鈕的點擊翻轉事件<br>c.save();//保持上次設定的狀態<BR> eraseFlag=true; <BR>c.strokeStyle="white"; <BR><br>$("#erase").text("畫筆");//改變按鈕上的文字<br>$(". eraseSeries").show('fast');//橡皮單選組出現<BR>// $("#eraseImg").show(); <BR>sizeE=5; <BR><br><br>},function(){ <BR>eraseFlag=false; <BR>$("#erase").text("橡皮"); <BR>$(".eraseSeries").hide('fast'); <BR>c.restore();//恢復上次畫筆的狀態（包括顏色，粗細等） <BR>}); <BR><br><br>//setInterval(paint,2); <BR><br>}); <br><br>var p_x;//上次滑鼠位置<br>var p_y; <BR>var p_x_now;//目前瞬間滑鼠位置<BR>var p_y_now; <BR>var eraseFlag=false; <BR>var sizeE;//橡皮大小<BR><br>$(document).mousedown(function(e){//滑鼠按下觸發事件<br><br><br>/// alert(sizeE); <BR>p_x= e.clientX;//取得位置，並置為上次滑鼠位置<BR>p_y= e.clientY; <BR>painting = true;//畫筆啟動標誌<BR> <br>}); <br>$(document).mousemove(function(e){//滑鼠移動觸發事件<BR>if(eraseFlag==true&& e.clientY>30)//橡皮擦處在啟動狀態，且滑鼠Y的位置大於30，也即滑鼠在畫板內<BR>{ <BR><br>//橡皮圖像跟隨滑鼠而動<br>$("#eraseImg").animate({left: e. clientX-sizeE "px",top: e.clientY-sizeE "px"},0).show('fast'); <BR>} <BR>else <BR>{ <BR>$("#eraseImg" ).hide('fast'); <BR>} <BR>if(painting==true)//處於畫筆啟動狀態<BR>{ <BR>//alert(1); <BR>p_x_now= e. clientX;//目前瞬間的滑鼠位置<BR>p_y_now= e.clientY; <BR>c.beginPath();//開始路徑<BR>//曲線是由一段非常小的直線構成，電腦運算速度很快，這是一種以直線迭代畫曲線的方式<BR>c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop);//移動到起始點<BR>c.lineTo (p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//從起始點畫直線到終點<BR><br>c.stroke(); <br>c.closePath();//封閉路徑，這個很重要，如果路徑不封閉， <BR>// 那麼只要canvas顏色改變，所有的之前畫過的顏色都發生改變<BR>p_x = p_x_now;//一次迭代後講當前的瞬間座標值賦給上次滑鼠座標值<BR>p_y = p_y_now; <BR>} <BR><br>}); <br><br>$(document).mouseup(function(e){//滑鼠放開觸發事件<br><br>painting=false;//凍結畫筆<br>});<br><br></腳本> <BR></頭> <BR><身體> <BR><div>; <BR><選擇id=“顏色”> <!--畫筆顏色- -> <BR><option class="opt" value="red">紅; <BR><option class="opt" value="yellow">黃; <BR>< option class="opt" value="blue">藍色 <BR><option class="opt" value="black" selected>黑色 <BR><option class="opt" value="green">綠色; <BR></選擇> <br><br><選擇id="fontSize"> <!--畫筆大小--> <BR><選項值=5已選擇>5</選項> <BR><選項值=10>10</選項> <BR><選項值=15>15</選項> <BR><選項值=20>20</選項> <BR><選項值=30>30</選項> <BR></選擇> <BR><按鈕id="擦除">擦皮</按鈕> <!--橡皮按鈕--> <BR><div class="eraseSeries"> <!--橡膠大小--> <BR><input type="radio" name="eraseSize" value="5" 選取/>5 <BR><input type=" radio" name="eraseSize" value="10"/> 10 <BR><輸入類型=“radio”名稱=“eraseSize”值=“15”/> 15 <BR><輸入類型=“radio”名稱= “eraseSize”值=“20”/> 20 <BR><input type="radio" name="eraseSize" value="30"/>30 <BR></script>