CanvasRenderingContext2D.clearRect()

Метод CanvasRenderingContext2D.clearRect(), предоставляемый Canvas 2D API, устанавливает прозрачный чёрный цвет для всех пикселей, расположенных внутри прямоугольника, заданного начальной точкой (x, y) и размерами (width, height), таким образом стирая любое ранее нарисованное содержимое.

Синтаксис

void ctx.clearRect(x, y, width, height);

Параметры

x

Координата начальной точки прямоугольника по оси x.

y

Координата начальной точки прямоугольника по оси y.

width

Ширина прямоугольника.

height

Высота прямоугольника.

Примеры

Использование метода clearRect

Ниже представлен простой фрагмент кода, использующий метод clearRect.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.lineTo(120, 120);
ctx.closePath(); // рисует последнюю линию треугольника
ctx.stroke();

ctx.clearRect(10, 10, 100, 100);

// очистить весь холст
// ctx.clearRect(0, 0, canvas.width, canvas.height);

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

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

Specification
HTML Standard
# dom-context-2d-clearrect-dev

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

BCD tables only load in the browser

Смотрите также