为什么我的HTML5/JS应用程序不能在我的iPhone上工作？

Question

最近怎么样？

最近，在本网站的帮助下，我学会了如何在HTML5画布上画一个矩形，点击按钮......这不是问题:)这是个问题......不幸的是...... ，当我试图用我的iPhone并没有在所有的工作......为什么:(

---

这里是我的代码：？

---

JAVASCRIPT：

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


    function init() { 
    canvas.addEventListener('mousedown', mouseDown, false); 
    canvas.addEventListener('mouseup', mouseUp, false); 
    canvas.addEventListener('mousemove', mouseMove, false); 
} 


function mouseDown(e) { 
    rect.startX = e.pageX - this.offsetLeft; 
    rect.startY = e.pageY - this.offsetTop; 
    drag = true; 
} 


function mouseUp() { 
    drag = false; 
} 


function mouseMove(e) { 
    if (drag) { 
    rect.w = (e.pageX - this.offsetLeft) - rect.startX; 
    rect.h = (e.pageY - this.offsetTop) - rect.startY ; 
    draw(); 
    } 
} 


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> 

---

任何帮助都将不胜感激:)

Answer 1

为第一你有你的代码 一个错误，你这个

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();