網路常都會看到網頁版小畫家之類的東西，可以用滑鼠來繪圖
所以就試試在行動裝置上用觸控的方式實作繪圖
HTML：
<body> <canvas id="sign" width="1000" height="1000"> Your browser does not have support for Canvas. </canvas> <input type="button" value="清空" id="clear" /> </body>
Javascript：
$(document).ready(function(){
//起始點位置
var pp = [-1,-1];
//下一個點的位置
var np = [0,0];
//button物件
var bu = document.getElementById('clear');
//canvas物件
var canvas = document.getElementById('sign');
//2維繪圖
var ctx = canvas.getContext("2d");
//線條寬度
ctx.lineWidth = 25;
//線條顏色
ctx.strokeStyle = "red";
//關閉原本瀏覽器的兩指縮放、拖拉捲動操作的干擾
document.body.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
//使用addEventListener的好處是，當我有相同的觸發事件時，就不會被蓋掉
//touchstart
canvas.addEventListener('touchstart', function(e) {
//每次觸發一次touch就換一次顏色
ctx.strokeStyle = ctx.strokeStyle == "red" ? ("green") : ("red");
}, false);
//touchmove
canvas.addEventListener('touchmove', function(e) {
var touches = e.touches;
//如果是剛下筆(手)，會先初始化起始點
if( pp[0] == -1 && pp[1] == -1 ){
pp = [touches[0].pageX,touches[0].pageY];
}
//紀錄下一點的位置
np = [touches[0].pageX,touches[0].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];
}, false);
//touchend
canvas.addEventListener('touchend', function(e) {
//起始點歸零
pp = [-1,-1];
}, false);
//清除canvas畫面
bu.onclick = function(){ clearCanvas(); };
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
});
