在iOS設備的HTML5畫布中使用Javascript的setTimeout問題

Question

我正在試驗一個腳本並嘗試使用iOS設備。由於無法使用onmousemove事件，因此我想使用可模擬觸摸和拖動的操作。我想到的最簡單的方法是使用計時器，只有使用onmousedown首先切換並使用onmouseup切換，才能始終呈現當前鼠標位置的繪製效果。

我期望timeCount函數被觸發，如果我只是把它叫做任何函數之外，但它不會，所以首先我檢查它是否在onmousedown事件中是空的，如果是，則調用timedCount。

timeCount被調用，即使我定義了setTimeout，它只會調用timeCount一個額外的時間，就是這樣。所以這是我的第一個問題。

其次，如何在沒有事件的情況下捕捉我當前的觸摸點（假設用戶手指在屏幕上的其他位置）？或者我需要一個事件？哪一個？

代碼如下。這是一個從http://html5demos.com/canvas-grad一個編輯的例子：

<canvas height="600" width="600"></canvas> 
<script> 

var canvas = document.getElementsByTagName('canvas')[0], 

ctx = null, 
grad = null, 
body = document.getElementsByTagName('body')[0], 
color = 255; 
var toggleDraw = 0; 
var timer = null; 



if (canvas.getContext('2d')) { 

    ctx = canvas.getContext('2d'); 
    ctx.clearRect(0, 0, 600, 600); 
    ctx.save(); 
    // Create radial gradient 
    grad = ctx.createRadialGradient(0,0,0,0,0,600); 
    grad.addColorStop(0, '#000'); 
    grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')'); 

    // assign gradients to fill 
    ctx.fillStyle = grad; 

    // draw 600x600 fill 
    ctx.fillRect(0,0,600,600); 
    ctx.save(); 

} 

canvas.onmousedown =函數（事件）{ toggleDraw = 1;如果（定時器== null）{0} 0 0 0 0 0 0 0 0 0 0 0 0 0 0 timedCount（）; } };

canvas.onmouseup = function（event）{ toggleDraw = 0; };

功能timedCount（）{

if(toggleDraw == 1){ 

    alert("yes"); 

    var width = window.innerWidth, 
    height = window.innerHeight, 
    x = event.clientX, 
    y = event.clientY, 
    rx = 600 * x/width, 
    ry = 600 * y/height; 

    var xc = ~~(256 * x/width); 
    var yc = ~~(256 * y/height); 

    grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); 
    grad.addColorStop(0, '#000'); 
    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join('')); 

    ctx.fillStyle = grad; 
    ctx.fillRect(0,0,600,600); 

} 

timer=setTimeout("timedCount()",50); 

}

我還試圖在畫布鼠標事件使用的setInterval和除去在timeCount功能的setTimeout的替代方案，但timeCount函數根本不叫：

canvas.onmousedown = function (event) { 
    toggleDraw = 1; 
    timer=setInterval("timedCount()",50); 
}; 

canvas.onmouseup = function (event) { 
    toggleDraw = 0; 
    clearInterval(timer); 
}; 

編輯：即便如此，我無法得到它的工作：

<script> 
    var canvas = document.getElementsByTagName('canvas')[0], 
    ctx = null, 
    grad = null, 
    body = document.getElementsByTagName('body')[0], 
    color = 255; 

    if (canvas.getContext('2d')) { 
     ctx = canvas.getContext('2d'); 
     ctx.clearRect(0, 0, 600, 600); 
     ctx.save(); 
     // Create radial gradient 
     grad = ctx.createRadialGradient(0,0,0,0,0,600); 
     grad.addColorStop(0, '#000'); 
     grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')'); 

     // assign gradients to fill 
     ctx.fillStyle = grad; 

     // draw 600x600 fill 
     ctx.fillRect(0,0,600,600); 
     ctx.save(); 

     canvas.ontouchmove = function (event) { 
      event.preventDefault(); 
      var width = window.innerWidth, 
      height = window.innerHeight, 
      x = event.clientX, 
      y = event.clientY, 
      rx = 600 * x/width, 
      ry = 600 * y/height; 

      var xc = ~~(256 * x/width); 
      var yc = ~~(256 * y/height); 

      grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); 
      grad.addColorStop(0, '#000'); 
      grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join('')); 
      // ctx.restore(); 
      ctx.fillStyle = grad; 
      ctx.fillRect(0,0,600,600); 
      // ctx.save(); 
     }; 
    } 
    </script> 

好，這裏是工作腳本！

至關重要的是要使用蘋果的觸摸API，並跟蹤您要使用的觸摸：

<script> 
    var canvas = document.getElementsByTagName('canvas')[0], 
    ctx = null, 
    grad = null, 
    body = document.getElementsByTagName('body')[0], 
    color = 255; 

    if (canvas.getContext('2d')) { 
     ctx = canvas.getContext('2d'); 
     ctx.clearRect(0, 0, 600, 600); 
     ctx.save(); 
     // Create radial gradient 
     grad = ctx.createRadialGradient(0,0,0,0,0,600); 
     grad.addColorStop(0, '#000'); 
     grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')'); 

     // assign gradients to fill 
     ctx.fillStyle = grad; 

     // draw 600x600 fill 
     ctx.fillRect(0,0,600,600); 
     ctx.save(); 


    } 

    canvas.ontouchmove = function (event) { 
     event.preventDefault(); 

     if(event.touches.length == 1){ 
      var touch = event.touches[0]; 
     } 

     var width = window.innerWidth, 
     height = window.innerHeight, 
     //x = event.clientX, 
     //y = event.clientY, 
     x = touch.pageX; 
     y = touch.pageY; 

     rx = 600 * x/width, 
     ry = 600 * y/height; 

     var xc = ~~(256 * x/width); 
     var yc = ~~(256 * y/height); 

     grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); 
     grad.addColorStop(0, '#000'); 
     grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join('')); 
     ctx.fillStyle = grad; 
     ctx.fillRect(0,0,600,600); 
    }; 
    </script> 

Answer 1

在iOS上所有的鼠標事件引發一次，當觸摸完成。這可能不是你想要的。

改爲使用ontouchdown,ontouchmove和ontouchup事件。

另外，在ontouchmove中，您需要防止默認行爲，以便頁面不會開始滾動。

canvas.ontouchmove = function(e) { 
    // your code here 
    e.preventDefault(); 
} 

Answer 2

你必須處理觸摸特定事件

1. touchstart：偏偏每一個手指放在屏幕上的時間
2. touchend：這種事每個手指從屏幕上消失的時間
3. touchmove：發生在已放置在屏幕上的手指在屏幕上移動時

S ee鏈接http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

node.ontouchstart = function(evt){ 
    console.log(evt.pageX + "/" + evt.pageY); 
}