在iOS设备的HTML5画布中使用Javascript的setTimeout问题

问题描述：

我正在试验一个脚本并尝试使用iOS设备。由于无法使用onmousemove事件，因此我想使用可模拟触摸和拖动的操作。我想到的最简单的方法是使用计时器，只有使用onmousedown首先切换并使用onmouseup切换，才能始终呈现当前鼠标位置的绘制效果。在iOS设备的HTML5画布中使用Javascript的setTimeout问题

我期望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>

答

在iOS上所有的鼠标事件引发一次，当触摸完成。这可能不是你想要的。

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

另外，在ontouchmove中，您需要防止默认行为，以便页面不会开始滚动。

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

谢谢。我用canvas.ontouchmove = function（event）替换了我的事件函数event.preventDefault（）; event.timedCount（）; }没有间隔，但timeCount似乎没有被调用。 – VagueExplanation

'event.timedCount（）;'？这不应该存在...尝试简单的开始。使事件处理程序的主体只是简单的alert（'omg it works'）'，看看函数是否被调用。一次在这里的一个问题:) –

其实我认为这是因为我没有在触摸列表中指定触摸..我会研究这一点。 – VagueExplanation

答

你必须处理触摸特定事件

touchstart：偏偏每一个手指放在屏幕上的时间
touchend：这种事每个手指从屏幕上消失的时间
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); 
}

在iOS设备的HTML5画布中使用Javascript的setTimeout问题

相关推荐