使用触摸事件在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