Как отложить цикл for и запустить операцию canvas? - PullRequest
Новая
       28

Как отложить цикл for и запустить операцию canvas?

0 голосов
/ 18 мая 2019

Я хотел бы запускать итерацию цикла каждые x секунд.

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

Пока у меня есть это: 

        for(let i=0;i<width;i++){ //Rows
          for(o=i*(width*4);o<i*(width*4)+(width*4);o+=4){//pixels in current row
                imgData.data[o] = 255
          }
          ctx.putImageData(imgData, xPos, yPos);
        }

, который успешно меняет все пикселина изображении должно быть 255 красных.Однако это происходит одновременно.Я хотел бы, чтобы это происходило по пикселю раз в x секунд.

Любое руководство?

Ответы [ 2 ]

2 голосов
/ 18 мая 2019

Если вы хотите, чтобы это происходило с пикселем каждую секунду, вам вообще не следует использовать внешний цикл for. Вместо этого используйте глобальную переменную, которая содержит позицию текущего пикселя. С каждым интервалом увеличивайте эту переменную и помещайте измененные imageData на холст.

Что-то вроде: 

var originalWidth = width;
var currentPixel = 0;

function update() {
  for (o = currentPixel * (originalWidth * 4); o < currentPixel * (originalWidth * 4) + (originalWidth * 4); o += 4) {
    imgData.data[o] = 255;
  }
  ctx.putImageData(imgData, xPos, yPos);
  if (currentPixel + 1 < originalWidth) {
    currentPixel++
  } else {
    clearInterval(intervalId);
  }
}
var intervalId = setInterval(update, 1000);
1 голос
/ 18 мая 2019

Версия с setTimeout() (или requestAnimationFrame()) и без использования глобальных переменных (и без всей "сложной" математики): 

const modifyPixel = (function(canvas) {
  const context = canvas.getContext("2d");
  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

  return function(index = 0) {
    if (index >= imageData.data.length) {
      return;
    }

    imageData.data[index] = 255;
    context.putImageData(imageData, 0, 0);

    index += 4;

    setTimeout(function() {
      modifyPixel(index + 4);
    }, 50);
  };
}(document.querySelector("canvas")));


(function init() {
  const canvas = document.querySelector("canvas");
  const context = canvas.getContext("2d");

  context.beginPath();
  context.rect(0, 0, canvas.width, canvas.height);
  context.fillStyle = "green";
  context.fill();
}());

const modifyPixel = (function(canvas) {
  const context = canvas.getContext("2d");
  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

  return function(index = 0) {
    if (index >= imageData.data.length) {
      return;
    }

    imageData.data[index] = 255;
    context.putImageData(imageData, 0, 0);
    
    index += 4;

    setTimeout(function() {
      modifyPixel(index + 4);
    }, 50);
  };
}(document.querySelector("canvas")));

modifyPixel();
<canvas style="width:200px; height:200px" width="50px" height="50px"></canvas>
...