使用HTML5做畫圖板的方法介紹_html5教學技巧

首先要說明的是這裡不是用滑鼠畫畫，而是在觸控裝置上用手指，例如ipad。

做畫圖板，自然使用html5的canvas來實現了。在canvas中我們可以畫圓，畫矩形，畫自訂的線條等等。這次主要使用的畫圓跟畫線條來實現。 html中支援對觸摸事件的回應。

onTouchStart 觸控開始

onTouchMove 觸控滑動

onTouchEnd 觸摸結束

有了這些事件，我們實作用手指在瀏覽器裡畫畫就很簡單了。

IPAD上的效果：

思路：當手指觸摸到屏幕的時候在onTouchStart 事件中在手指觸摸的位置上添加一個圓；當手指開始滑動的時候在onTouchMove中不斷的從上一個觸摸點到下一個點畫線條。

HTML：

複製程式碼

碼🎜>

JS：

複製程式碼

程式碼如下:

程式碼如下:

程式碼如下:



程式碼如下:canvas
var canvas = document.getElementById("canvas");
//full screen
canvas.width=window.innerWidth;
canvas.height=window.innerHeight>是否支援觸摸
var touchable = 'createTouch' in document;
if (touchable) {
canvas.addEventListener('touchstart', onTouchStart, false);
canvas.ouch.ouchListener('tmouchStart, false);
canvas.ouch.ouchListener('tmouchStart,' 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.t [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();取消事件的預設動作。在滑動事件中一定要調這個方法。不然滑動時就會觸發瀏覽器預設的滑動事件，就會發生頁面下拉的效果，你就畫不了畫嘍。