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