Последствия изменения размеров холста

Question

Итак, я пытаюсь оптимизировать свой код, получая доступ только к свойствам холста DOM, когда размер окна изменяется, но у меня возникает эта странная проблема. Почему изменение размера предотвращает это? Постскриптум я не уверен, что включить У меня есть 2k строк кода прямо сейчас.

Я использую

document.getElementById('mycanvas').getContext("2d").clearRect(-2000, -2000, 2000, 2000)

С этим в моем цикле рендеринга:

document.getElementById('mycanvas').getContext("2d").height = window.innerHeight

Без этого:

Answer 1

Установка либо width, либо height свойств вашего HTMLCanvasElement приведет к сбросу всех свойств вашего контекста к значениям по умолчанию.Он также удалит все области отсечения, и что более интересно в вашем случае, он сбросит матрицу преобразования и установит новые данные пикселей (все прозрачно-черные).И это медленно, поэтому вы правильно удаляете его из своего кода.

Ваш вызов ctx.clearRect устанавливает x и y координаты на -2000, это означает, что с матричным преобразованием по умолчанию, вы очищаете несуществующие пиксели.
Установка HTMLCanvasElement.height была тем, что очищало ваш холст ранее.

Мы также можем видеть на вашем втором скриншоте, что вы рисуете сетку немного больше внизу.каждый раз, это означает, что вы, вероятно, изменяете матрицу контекста (например, ctx.translate(x, y)).
Теперь, когда вы не сбрасываете его с настройкой height, вам нужно сделать это явно.Это можно сделать с помощью ctx.setTransform(1,0,0,1,0,1).

Таким образом, базовый запуск функции рисования будет выглядеть как

function draw() {
  // clear
  ctx.setTransform(1, 0, 0, 1, 0, 0); // reset the transform matrix (fast)
  ctx.clearRect(0, 0, canvas.width, canvas.height); // clear all pixels (fast)
  //... start drawing ...

Теперь, возможно, есть другие свойства, которые выпредполагается, что они возвращаются к значениям по умолчанию, в то время как их нет, например, fillStyle и т. д. Большинство из них можно просто установить на то, что вы хотите при необходимости.
Однако, если вы используете ctx.clip() (но, глядя на скриншот,кажется, что вы не), вам нужно save () и restore () состояние контекста, чтобы иметь возможность удалить область отсечения (плохой дизайн API ...).