В этом уроке вы узнаете, как использовать метод 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().