首先要說明的是這裡不是用滑鼠畫畫，而是在觸摸裝置上用手指，比如ipad。
做畫圖板，自然使用html5的canvas來實現了。在canvas中我們可以畫圓，畫矩形，畫自訂的線條等等。這次主要使用的畫圓跟畫線條來實現。html中支援對觸摸事件的響應。
onTouchStart 觸摸開始
onTouchMove 觸摸滑動
onTouchEnd 觸摸結束
有了這些事件，我們實現用手指在瀏覽器裡畫畫就很簡單了。
IPAD上的效果：
思路：當手指觸摸到螢幕的時候在onTouchStart 事件中在手指觸摸的位置上添加一個圓；當手指開始滑動的時候在onTouchMove中不斷的從上一個觸摸點到下一個點畫線條。
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Canvas</title> <meta name = "viewport" content = "width = device-width, user-scalable = no"></head><body><canvas id="canvas" ></canvas><script type="text/javascript" src="canvasScript.js" charset="utf-8"></script></body></html>
JS：
//get canvasvar canvas = document.getElementById("canvas");//full screencanvas.width=window.innerWidth;canvas.height=window.innerHeight;//是否支援觸摸var touchable = 'createTouch' in document;if (touchable) { canvas.addEventListener('touchstart', onTouchStart, false); canvas.addEventListener('touchmove', onTouchMove, false);}else{ alert("touchable is false !");}//上一次觸摸座標var lastX;var lastY;var ctx =canvas.getContext("2d");ctx.lineWidth=10;//畫筆粗細ctx.strokeStyle="#FF0000";//畫筆顏色//觸摸開始事件function onTouchStart(event) { event.preventDefault(); lastX=event.touches[0].clientX; lastY=event.touches[0].clientY; drawRound(lastX,lastY);}//觸摸滑動事件function onTouchMove(event) { try { event.preventDefault(); drawLine(lastX,lastY,event.touches[0].clientX,event.touches[0].clientY); lastX=event.touches[0].clientX; lastY=event.touches[0].clientY; } catch(err){ alert( err.description); }}//畫圓function drawRound(x,y){ ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(x,y,5,0,Math.PI*2,true); ctx.closePath(); ctx.fill();}//畫線function drawLine(startX,startY,endX,endY){ ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(startX,startY); ctx.lineTo(endX,endY); ctx.stroke();}
關鍵點：
ctx.lineCap="round"; 設定所畫線條結束的樣式帽為圓形。這個很關鍵，不然線上條角度變化大的地方會出現斷帶。
event.preventDefault();取消事件的預設動作。在滑動事件中一定要調這個方法。不然滑動時就會觸發瀏覽器預設的滑動事件，就會發生頁面下拉的效果，你就畫不了畫嘍。
後續：
後面我會結合phonegap，把這個html5的網頁封裝成app搬到android，ios，wp上去。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
