iOS设备上HTML5 canvas中的Javascript setTimeout问题

我正在试验一个脚本，并尝试将其用于iOS设备。因为没有办法使用onmousemove事件，我想使用一些东西来模拟触摸和拖动。我想到的最简单的方法是使用计时器来呈现当前鼠标位置的绘制效果，只有当它首先通过使用onmousedown切换，并通过使用onmouseup取消切换时。

我希望timeCount函数被触发，如果我只是在任何函数外调用它，但它没有，所以首先我检查它是否在onmousedown事件内为空，如果是，调用timmedcount。

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

画布。Onmousedown = function (event) {toggleDraw = 1;If (timer == null){timedCount ();}

画布。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>