手持裝置的可以參考這篇
HTML
1 | <input type="button" value="清空" id="clear" /><br/> |
2 | <canvas id="sign" width="1000" height="1000"> |
3 | Your browser does not have support for Canvas. |
4 | </canvas> |
jQuery
1 | $(document).ready(function(){ |
2 | var pp = [-1,-1]; //起始點位置 |
3 | var np = [0,0];//下一個點的位置 |
4 | var bu = $('#clear'); |
5 | var canvas = $('#sign');//canvas物件 |
6 | |
7 | //2維繪圖(jQuery物件需要用canvas[0]呼叫，如果是用js的document.getElementById就不需要[0]) |
8 | var ctx = canvas[0].getContext("2d"); |
9 | ctx.lineWidth = 1;//線條寬度 |
10 | ctx.strokeStyle = "black";//線條顏色 |
11 | |
12 | //判斷滑鼠是否有按住(點擊) |
13 | var clicking = false; |
14 | |
15 | //點擊滑鼠 |
16 | canvas.mousedown(function(e){ |
17 | clicking = true; |
18 | }); |
19 | |
20 | //滑鼠移動(要按住滑鼠才會繪圖) |
21 | canvas.mousemove(function(e){ |
22 | if( !clicking ){ return false; } |
23 | //如果是剛下筆，會先初始化起始點 |
24 | if( pp[0] == -1 && pp[1] == -1 ){ |
25 | pp = [e.pageX,e.pageY]; |
26 | } |
27 | //紀錄下一點的位置 |
28 | np = [e.pageX,e.pageY]; |
29 | |
30 | //繪圖 |
31 | ctx.beginPath(); |
32 | ctx.moveTo(pp[0], pp[1]); |
33 | ctx.lineTo(np[0],np[1]); |
34 | ctx.closePath(); |
35 | ctx.stroke(); |
36 | //下一點的位置=新的起始點 |
37 | pp[0] = np[0]; |
38 | pp[1] = np[1]; |
39 | }); |
40 | |
41 | //放開滑鼠，座標重新歸零 |
42 | canvas.mouseup(function(e){ |
43 | clicking = false; |
44 | pp = [-1,-1]; |
45 | }); |
46 | |
47 | //清除canvas畫面 |
48 | bu.click(function(e){ |
49 | ctx.clearRect(0, 0, canvas.width(), canvas.height()); |
50 | }); |
51 | }); |