Изменение размера HTML-холста не позволяет его содержимое

Question

Изменение размера HTML-холста не позволяет его содержимое

У меня есть элемент HTML-холста, размер которого изменяется, когда пользователь изменяет размер экрана.

canvas.height = pageHeight();
canvas.width = pageWidth();

Фактическое изменение размера работает нормально, но оно не отображает холст.

Я хотел бы сохранить содержимое. Есть ли другой способ изменить размер элемента холста или есть способ сохранить содержимое и затем нарисовать его обратно на холст?

7

javascript html canvas

задан Richard Garside 22 August 2010 в 20:56

1 ответ

Другие вопросы по тегам:

javascript html canvas

Похожие вопросы:

score 13 · Accepted Answer

Вам нужно либо изменить размер холста с помощью CSS, либо перерисовать холст после изменения его размера.

Если вы хотите сохранить содержимое холста и перерисовать его, я могу придумать несколько вариантов:

Используйте context.getImageData , чтобы захватить весь холст, изменить размер холста, затем использовать context.putImageData , чтобы перерисовать его в новом масштабе.
Создайте объект Изображение , установив в качестве источника результат canvas.toDataUrl () , измените размер холста, затем нарисуйте изображение в новом масштабе.
вызовите context.setScale (xscale, yscale) и вызовите любую функцию, которую вы использовали для первоначального рисования холста. Если вы правильно настроили xscale и yscale , он автоматически масштабирует все до нового размера.
Создайте новый холст с обновленным размером и вызовите context.drawImage (oldCanvas, ...) , чтобы скопировать старый холст на новый. Затем вы замените старый холст новым.

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

На мой взгляд, вариант 3 (перерисовка изображения в новом масштабе) лучше всего, если это возможно. Это единственный вариант, который сохранит ваши линии абсолютно гладкими и четкими, и он всегда будет работать (при условии, что у вас все еще есть вся информация для создания изображения).