ClearRect: примеры (JAVASCRIPT)

Базовые примеры использования

Очистка всей поверхности холста размером 200x100 пикселей.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Закрашиваем холст цветом
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, 200, 100);
// Очищаем весь холст
ctx.clearRect(0, 0, 200, 100);

// Результат: полностью прозрачный холст.

Очистка части области с использованием отрицательных размеров.

ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, 200, 100);
// Очистка прямоугольника от точки (150,50) влево и вверх на 100px
ctx.clearRect(150, 50, -100, -50);

// Результат: в правом нижнем углу серого прямоугольника
// появится прозрачное "окно" размером 100x50px.

Похожие методы Canvas API

fillRect(): Закрашивает прямоугольник указанным цветом (через fillStyle), а не делает его прозрачным. Используется для рисования сплошных фигур или фона.

strokeRect(): Рисует только контур (обводку) прямоугольника. Полезен для создания рамок.

Глобальные операции композиции: Изменение свойства globalCompositeOperation контекста (например, на 'destination-out') позволяет стирать части рисунка другими способами, но clearRect обычно работает быстрее для простой очистки.

Выбор метода зависит от задачи: clearRect — для полного удаления пикселей, fillRect — для заливки цветом, strokeRect — для контура.

Аналоги в других языках программирования

PHP (библиотека GD): Функция imagefilledrectangle() с цветом imagecolorallocatealpha($im, 0, 0, 0, 127) может имитировать прозрачность, но для "очистки" часто создают новое изображение.

// Создание и "очистка" прямоугольной области
$im = imagecreatetruecolor(200, 100);
$transparent = imagecolorallocatealpha($im, 0, 0, 0, 127);
imagefilledrectangle($im, 50, 25, 150, 75, $transparent);

Python (PIL/Pillow): Модуль ImageDraw позволяет рисовать прямоугольники. Для очистки используется заливка прозрачным цветом.

from PIL import Image, ImageDraw
img = Image.new('RGBA', (200, 100), 'lightblue')
draw = ImageDraw.Draw(img)
# Создание прозрачного прямоугольника
clear_rect = Image.new('RGBA', (100, 50), (0,0,0,0))
img.paste(clear_rect, (50, 25), clear_rect)

C (библиотека SDL2): Функция SDL_FillRect() может заливать область цветом, включая прозрачный, если поверхность его поддерживает. В отличие от JavaScript, работа идёт с поверхностями и структурами.

SDL_Surface *screen = ...;
SDL_Rect rect = {50, 25, 100, 50};
Uint32 transparent_color = SDL_MapRGBA(screen->format, 0, 0, 0, 0);
SDL_FillRect(screen, &rect, transparent_color);

Основное отличие — в необходимости управления памятью, поверхностями и явного указания прозрачного цвета, в то время как clearRect работает непосредственно с контекстом холста.

Распространенные ошибки

1. Очистка до вызова getContext. Попытка использовать метод без получения контекста.

const canvas = document.querySelector('canvas');
// ctx не определен
ctx.clearRect(0, 0, 100, 100); // Ошибка: ctx is not defined

Uncaught ReferenceError: ctx is not defined

2. Очистка несуществующей области. Передача координат за пределами холста не вызывает ошибку, но и не дает видимого эффекта.

ctx.clearRect(500, 500, 100, 100); // Ничего не происходит, если холст меньше

3. Неправильный порядок координат. Ошибочное указание координат может привести к очистке не той области.

// Хотим очистить область (10,10)-(110,60), но перепутали ширину и высоту
ctx.clearRect(10, 10, 60, 110); // Очистится вытянутый по вертикали прямоугольник

Изменения в спецификации

Метод clearRect() был частью Canvas API с момента его создания. За последние годы существенных изменений в его работе или аргументах не было. Основные обновления спецификации касались уточнения поведения с отрицательными размерами и интеграции с новыми возможностями, такими как OffscreenCanvas. Синтаксис и семантика остаются стабильными во всех современных браузерах.

Расширенные примеры применения

Создание анимации с очисткой кадра. Классический пример игры или движущегося объекта.

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
function animate() {
    // Очистка всего кадра
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Отрисовка нового кадра
    ctx.fillRect(x, 50, 50, 50);
    x += 2;
    if (x > canvas.width) x = 0;
    requestAnimationFrame(animate);
}
animate();

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

// Движущийся шар, оставляющий след из прозрачных "дыр"
let ballX = 100;
let trail = [];
function draw() {
    // Очищаем только предыдущую позицию шара и старые следы
    trail.forEach(pos => {
        ctx.clearRect(pos.x - 5, pos.y - 5, 10, 10);
    });
    // Добавляем текущую позицию в след
    trail.push({x: ballX, y: 100});
    if (trail.length > 10) trail.shift(); // Ограничиваем длину следа
    // Рисуем новый шар
    ctx.beginPath();
    ctx.arc(ballX, 100, 5, 0, Math.PI * 2);
    ctx.fill();
    ballX += 1;
}

Интерактивный ластик. Обработка событий мыши для стирания части рисунка.

canvas.addEventListener('mousemove', (e) => {
    if (e.buttons !== 1) return; // Кнопка мыши нажата
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    // Очищаем область вокруг курсора
    ctx.clearRect(x - 10, y - 10, 20, 20);
});
// Сначала создаем какое-либо изображение на холсте
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, canvas.width, canvas.height);

Создание маски. Использование clearRect для вырезания части изображения.

// Рисуем фон
ctx.fillStyle = 'linear-gradient(to right, red, blue)';
ctx.fillRect(0, 0, 300, 150);
// Сохраняем состояние и применяем маску
ctx.save();
ctx.beginPath();
ctx.rect(50, 25, 200, 100);
ctx.clip(); // Устанавливаем маску в форме прямоугольника
// Очищаем ВНУТРИ маски, создавая "дыру"
ctx.clearRect(0, 0, 300, 150);
ctx.restore();
// Теперь можно нарисовать что-то под "дырой"
ctx.fillStyle = 'yellow';
ctx.fillRect(0, 0, 300, 150); // Желтый виден только в вырезанной области