爲什麼我的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();