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

我正在尝试使用脚本，并尝试将其用于iOS设备。由于无法使用onmousemove事件，因此我想使用模拟触摸和拖动的方法。我想到的最简单的方法是使用计时器，以始终使用当前鼠标位置来呈现我具有的绘制效果，前提是必须先使用onmousedown对其进行切换，然后使用onmouseup对其进行切换。

我希望如果仅在任何函数之外调用timeCount函数，就会触发该事件，但是不会触发，因此首先我检查onmousedown事件中它是否为null，如果是，则调用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;
    if（timer == null）{
        timedCount（）;
    }
};

canvas.onmouseup =函数（事件）{
    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>

好的，这是工作脚本！！

使用Apples touch 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();
}