<!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不單獨占一行*/
display: inline-block;
}
</style>
<script src="jquery-1.7.1.js"></script>
<script>
var c;//獲取到的2d畫板
var painting = false;//判斷是否正在繪畫，即鼠標左鍵是否長按下去
var canvas;//畫板
$(function(){
$(".eraseSeries").hide();//初始狀態單選按鈕組隱藏
canvas=document.getElementById("myCanvas");
c=canvas.getContext("2d");
c.lineCap="round";//設置筆跡邊角，否則筆跡會出現斷層
c.strokeStyle="black";//筆跡的顏色
c.lineWidth=5;//筆跡的粗細
$("#color").change(function(){//筆跡顏色發生改變時
if(eraseFlag==true)//處在擦皮狀態
{
$("#erase").trigger("click");//自動觸發橡皮的點擊事件，以返回到畫筆狀態
}
c.strokeStyle=$(this).val();//設置畫筆狀態
c.lineWidth=$(this).val();
});
$("#fontSize").change(function(){//畫筆粗細發生改變
if(eraseFlag==true)//同上
{
$("#erase").trigger("click");
}
c.lineWidth=$(this).val();
c.strokeStyle=$("#color").val();
//eraseFlag=false;
});
$(".eraseSeries").click(function(){//橡皮大小發生改變
var size=$('input[name="eraseSize"]:checked').val();//獲取到橡皮單選按鈕組的選中值
sizeE=size;//將該值傳到全局變量上，sizeE需要用來控制橡皮樣式的位置
c.lineWidth=size;
$("#eraseImg").css({"width" :size+"px","height":size+"px"});//橡皮樣式大小發生改變
});
$("#erase").toggle(function(){//橡皮按鈕的點擊翻轉事件
c.save();//保持上次設置的狀態
eraseFlag=true;
c.strokeStyle="white";
$("#erase").text("畫筆");//改變按鈕上的文字
$(".eraseSeries").show('fast');//橡皮單選組出現
// $("#eraseImg").show();
sizeE=5;
},function(){
eraseFlag=false;
$("#erase").text("橡皮");
$(".eraseSeries").hide('fast');
c.restore();//恢復上次畫筆的狀態（包括顏色，粗細等）
});
//setInterval(paint,2);
});
var p_x;//上次鼠標位置
var p_y;
var p_x_now;//當前瞬間鼠標位置
var p_y_now;
var eraseFlag=false;
var sizeE;//橡皮大小
$(document).mousedown(function(e){//鼠標按下觸發事件
// alert(sizeE);
p_x= e.clientX;//獲取位置，并置為上次鼠標位置
p_y= e.clientY;
painting = true;//畫筆啟動標志
});
$(document).mousemove(function(e){//鼠標移動觸發事件
if(eraseFlag==true&& e.clientY>30)//橡皮處在激活狀態，并且鼠標Y的位置大于30，也即鼠標在畫板內
{
//橡皮圖像跟隨鼠標而動
$("#eraseImg").animate({left: e.clientX-sizeE+"px",top: e.clientY-sizeE+"px"},0).show('fast');
}
else
{
$("#eraseImg").hide('fast');
}
if(painting==true)//處于畫筆激活狀態
{
//alert(1);
p_x_now= e.clientX;//當前瞬間的鼠標位置
p_y_now= e.clientY;
c.beginPath();//開始路徑
//曲線是由一段段非常小的直線構成，計算機運算速度很快，這是一種以直線迭代畫曲線的方式
c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop);//移動到起始點
c.lineTo(p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//從起始點畫直線到終點
c.stroke();
c.closePath();//封閉路徑，這個很重要，如果路徑不封閉，
// 那么只要canvas顏色發生改變，所有的之前畫過的顏色都發生改變
p_x = p_x_now;//一次迭代后講當前的瞬間坐標值賦給上次鼠標坐標值
p_y = p_y_now;
}
});
$(document).mouseup(function(e){//鼠標松開觸發事件
painting=false;//凍結畫筆
});
</script>
</head>
<body>
<div >
<select id="color" > <!--畫筆顏色-->
<option class="opt" value="red">紅色</option>
<option class="opt" value="yellow">黃色</option>
<option class="opt" value="blue">藍色</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>
