Метод Canvas clearRect() в JavaScript

В этом уроке вы узнаете, как использовать метод Canvas clearRect() в JavaScript для стирания указанной области холста.

clearRect() — это метод контекста 2D-рисования. Метод очищает область холста, делая ее прозрачной.

На практике вы рисуете фигуры, а затем используете метод clearRect() для очистки определенных областей и создания интересных эффектов.

Синтаксис:

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

clearRect() имеет четыре параметра, которые определяют область для стирания:

  • x — координата по оси x начальной точки прямоугольника.
  • y — координата по оси Y начальной точки прямоугольника.
  • width — это ширина прямоугольника. Знак ширины будет определять направление прямоугольника. Положительные значения находятся справа, а отрицательные — слева от начальной точки.
  • height — высота прямоугольника. Он также принимает как положительные, так и отрицательные значения. Положительные значения уменьшаются, а отрицательные значения увеличиваются от начальной точки.

Пример

Ниже показан index.html, содержащий элемент холста:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Canvas clearRect</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <h1>JavaScript clearRect() Demo</h1>

    <canvas id="canvas" height="400" width="500">
    </canvas>

    <script src="js/app.js"></script>

</body>
</html> 

В файле app.js определен метод draw(), который будет рисовать на холсте:

function draw() {
    const canvas = document.querySelector('#canvas');

    if (!canvas.getContext) {
        return;
    }

    const ctx = canvas.getContext('2d');

    // draw two squares
    ctx.fillStyle = '#F9DC5C';
    ctx.fillRect(50, 50, 150, 150);

    ctx.fillStyle = 'rgba(0,0,255,0.5)';
    ctx.fillRect(100, 100, 150, 150);

    // clear the intersection
    ctx.clearRect(100, 100, 100, 100);

}

draw();

На следующем рисунке показан вывод:

Вывод

Как это работает:

  • Сначала выберите элемент холста с помощью метода document.querySelector().
  • Затем проверьте, поддерживает ли браузер canvas API.
  • Затем получите контекст 2D-рисования для рисования на холсте.
  • Затем нарисуйте два пересекающихся квадрата с помощью fillRect(). Второй квадрат имеет альфа-прозрачность.
  • Наконец, очистите пересечение двух квадратов с помощью clearRect().
Рейтинг
( Пока оценок нет )
Александр Русаков / автор статьи
Программист, разработчик, 12 лет опыта работы в крупных компаниях. Быстро освоил typescript, делюсь своими знаниями на страницах этого сайта.
Загрузка ...
JavaScript и TypeScript