[jQuery]Canvas手繪功能

手持裝置的可以參考這篇

HTML

<input type="button" value="清空" id="clear" /><br/>
<canvas id="sign" width="1000" height="1000">
	Your browser does not have support for Canvas. 
</canvas>

jQuery

$(document).ready(function(){
	var pp = [-1,-1]; //起始點位置
	var np = [0,0];//下一個點的位置
	var bu = $('#clear');
	var canvas  = $('#sign');//canvas物件
	
	//2維繪圖(jQuery物件需要用canvas[0]呼叫，如果是用js的document.getElementById就不需要[0])
	var ctx = canvas[0].getContext("2d"); 
	ctx.lineWidth = 1;//線條寬度
	ctx.strokeStyle = "black";//線條顏色
	
	//判斷滑鼠是否有按住(點擊)
	var clicking = false;
	
	//點擊滑鼠
	canvas.mousedown(function(e){
		clicking = true;
	});
	
	//滑鼠移動(要按住滑鼠才會繪圖)
	canvas.mousemove(function(e){
		if( !clicking ){ return false; }
		//如果是剛下筆，會先初始化起始點
		if( pp[0] == -1 && pp[1] == -1 ){ 
			pp = [e.pageX,e.pageY]; 
		}
		//紀錄下一點的位置
		np = [e.pageX,e.pageY];
		
		//繪圖
		ctx.beginPath();
		ctx.moveTo(pp[0], pp[1]);
		ctx.lineTo(np[0],np[1]);
		ctx.closePath();
		ctx.stroke();
		//下一點的位置=新的起始點
		pp[0] = np[0];
		pp[1] = np[1];
	});
	
	//放開滑鼠，座標重新歸零
	canvas.mouseup(function(e){
		clicking = false;
		pp = [-1,-1];
	});
	
	//清除canvas畫面
	bu.click(function(e){
		ctx.clearRect(0, 0, canvas.width(), canvas.height());
	});
});