Как сделать пиксельные операции на холсте быстрее в Javascript - PullRequest
Новая
       12

Как сделать пиксельные операции на холсте быстрее в Javascript

1 голос
/ 30 июня 2019

Я пишу программу для преобразования трех уравнений в изображение, используя их для генерации значений RGB для каждого пикселя на холсте. Это код моего первого теста: 

const canvas = document.getElementById("game")
const context = canvas.getContext("2d")

time = new Date()

canvas.width = 500
canvas.height = 500

for (x = 0; x < canvas.width; x++) {
  for (y = 0; y < canvas.height; y++) {
    context.fillStyle = "red"
    context.fillRect(x, y, 1, 1)
  }
}

console.log(new Date() - time)
<canvas id="game"></canvas>

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

Как я могу сделать эти операции с пикселями быстрее?

1 Ответ

2 голосов
/ 30 июня 2019

Если вы используете только один цвет, вы можете немного его ускорить, установив fillStyle перед циклом вместо того, чтобы устанавливать его на каждой итерации. Это, очевидно, не сработает, если вы хотите установить разные цвета для разных пикселей.

Вы также можете установить цвета в объекте imageData, а затем нарисовать все сразу с помощью putImageData. Это значительно быстрее для меня как в Chrome, так и в Firefox. 

const canvas = document.getElementById("game")
const context = canvas.getContext("2d")

time = new Date()

canvas.width = 500
canvas.height = 500

let imageData = context.createImageData(canvas.width, canvas.height)
let data = imageData.data;
let i = 0;
while (i < data.length) {
  data[i++] = 255; // Red value
  data[i++] = 0; // Green value
  data[i++] = 0; // Blue value
  data[i++] = 255; // Alpha (opacity)
}
context.putImageData(imageData, 0, 0)
console.log(new Date() - time)
<canvas id="game"></canvas>
...