CanvasRenderingContext2D: метод reset()

Базовая версия 2023

Новое

С декабря 2023 года эта функция работает на последних устройствах и версиях браузеров. Эта функция может не работать на старых устройствах или браузерах.

Метод CanvasRenderingContext2D.reset() API Canvas 2D сбрасывает контекст отрисовки в исходное состояние, позволяя повторно использовать его для отрисовки чего-либо другого, без необходимости явного сброса всех свойств.

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

Синтаксис

reset()

Параметры

Нет.

Возвращаемое значение

None (undefined).

Примеры

В этом примере показано, как использовать reset() для полной очистки контекста перед повторной отрисовкой.

Сначала мы определяем кнопку и холст.

#toggle-reset {
  display: block;
}

<button id="toggle-reset">Toggle</button>
<canvas id="my-house" width="500" height="200"></canvas>

Код сначала получает 2d контекст для холста. Затем он определяет функции, которые могут использовать контекст для рисования прямоугольника и круга соответственно.

// Get the 2d context
const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");

function drawRect() {
  // Set line width
  ctx.lineWidth = 10;

  // Stroke rect outline
  ctx.strokeRect(50, 50, 150, 100);

  // Create filled text
  ctx.font = "50px serif";
  ctx.fillText("Rect!", 70, 110);
}

function drawCircle() {
  // Set line width
  ctx.lineWidth = 5;

  // Stroke out circle
  ctx.beginPath();
  ctx.arc(300, 100, 50, 0, 2 * Math.PI);
  ctx.stroke();

  // Create filled text
  ctx.font = "25px sans-serif";
  ctx.fillText("Circle!", 265, 100);
}

Затем мы рисуем прямоугольник, используя его функцию. Кнопка переключает рисование круга и прямоугольника. Обратите внимание, как reset() вызывается перед отрисовкой для очистки контекста.

drawRect();

// Toggle between circle and rectangle using button
let toggle = true;
const myButton = document.getElementById("toggle-reset");

myButton.addEventListener("click", () => {
  ctx.reset(); // Clear the context!
  if (toggle) {
    drawCircle();
  } else {
    drawRect();
  }
  toggle = !toggle;
});

Результат выглядит так:

Спецификации

Спецификация
HTML # dom-context-2d-reset

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`reset`	99	99	113	85	17.2	99	113	68	17.2	18.0	99

См. также

Интерфейс, определяющий этот метод: CanvasRenderingContext2D

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/reset