使用觸摸事件在HTML5畫布上繪製正方形

Question

我遇到問題，我試圖在畫布上用觸摸事件繪製正方形，但它不起作用，有人可以幫我弄清楚爲什麼？

---

這裏是我到目前爲止的代碼：

JAVASCRIPT：

// "Draw Rectangle" Button 
function rect(){ 
var canvas = document.getElementById('canvasSignature'), ctx = canvas.getContext('2d'), rect = {}, drag = false; 

function init() { 
    canvas.addEventListener("touchstart", touchHandler, false); 
    canvas.addEventListener("touchmove", touchHandler, false); 
    canvas.addEventListener("touchend", touchHandler, false); 
} 


function touchHandler(event) { 
    if (event.targetTouches.length == 1) { //one finger touche 
    var touch = event.targetTouches[0]; 

    if (event.type == "touchstart") { 
     rect.startX = touch.pageX; 
     rect.startY = touch.pageY; 
     drag = true; 
    } else if (event.type == "touchmove") { 
     if (drag) { 
     rect.w = touch.pageX - rect.startX; 
     rect.h = touch.pageY - rect.startY ; 
     draw(); 
     } 
    } else if (event.type == "touchend" || event.type == "touchcancel") { 
     drag = false; 
    } 
    } 
} 

function draw() { 
    ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); 
} 

init(); 
} 

---

HTML5：

 <div id="canvasDiv"> 
    <canvas id="canvasSignature" width="580px" height="788px" style="border:2px solid #000; background: #FFF;"></canvas> 
</div> 



<div id="rect"> 
    <p><button onclick="rect();">Rectangle</button></p> 
</div> 

---

感謝agai n， Wardenclyffe

Answer 1

在Chrome中進行了模擬觸摸事件測試jsFiddle這個問題似乎是您綁定您的點擊事件的方式。我剛剛使用jQuery。

或者沒有jQuery：just a plain addEventListener