Проблемы с setTimeout с Javascript на холсте HTML5 на устройстве iOS

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 = function (event) {toggleDraw = 1;if (timer == null) {timedCount ();}};

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

function 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 на событиях мыши canvas.и удаление setTimeout в функции timeCount, но функция 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 касания Apple и отслеживать касание, которое вы хотите использовать:

<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

Вы должны обрабатывать определенные события касания

1. сенсорный запуск: происходит каждый раз, когда на экране появляется палец
2. touchend: происходит каждый раз, когда палец убирается с экрана
3. touchmove: происходит, когда палец, уже помещенный на экран, перемещается по экрану

См. Ссылку http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

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

Answer 2

В iOS все события мыши запускаются сразу после завершения касания.Что, вероятно, не то, что вам нужно.

Вместо этого используйте события ontouchdown, ontouchmove и ontouchup.

Кроме того, в ontouchmove вам нужно запретить поведение по умолчанию, чтобыстраница не начинает прокручиваться.

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