CanvasRenderingContext2D.clearRect()
Метод CanvasRenderingContext2D.clearRect() , предоставляемый Canvas 2D API, устанавливает прозрачный чёрный цвет для всех пикселей, расположенных внутри прямоугольника, заданного начальной точкой (x, y) и размерами (width, height), таким образом стирая любое ранее нарисованное содержимое.
Синтаксис
void ctx.clearRect(x, y, width, height);
Параметры
Координата начальной точки прямоугольника по оси x.
Координата начальной точки прямоугольника по оси y.
Примеры
Использование метода clearRect
Ниже представлен простой фрагмент кода, использующий метод clearRect .
HTML
canvas id="canvas">canvas>
JavaScript
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);
Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:
canvas id="canvas" width="400" height="200" class="playable-canvas">canvas> div class="playable-buttons"> input id="edit" type="button" value="Edit" /> input id="reset" type="button" value="Reset" /> div> textarea id="code" class="playable-code" style="height:140px;"> ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(200,20); ctx.lineTo(120,120); ctx.closePath(); // рисует последнюю линию треугольника ctx.stroke(); ctx.clearRect(10, 10, 100, 100);textarea >
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); > reset.addEventListener("click", function () textarea.value = code; drawCanvas(); >); edit.addEventListener("click", function () textarea.focus(); >); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas);
Спецификации
| Specification |
|---|
| HTML Standard # dom-context-2d-clearrect-dev |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Интерфейс, предоставляющий данный метод: CanvasRenderingContext2D
- CanvasRenderingContext2D.fillRect()
- CanvasRenderingContext2D.strokeRect()
Как очистить канвас
Сообщений: 4,929
Способы очистки канвы
//это очистит рабочий стол InvalidateRect(0, nil, true); // InValidateRect(Canvas.Handle,nil,true); // Если вы используете холст формы, то попробуйте следующее: InValidateRect(Form1.Handle,nil,true); // (или взамен передать дескриптор компонента) // Это очистит хост: Canvas.FillRect(Canvas.ClipRect); // или // Canvas.Brush.Color:=ClWhite; // Canvas.FillRect(Canvas.ClipRect); // Самый быстрый способ очистить Canvas PatBlt(Form1.Canvas.Handle, 0, 0, Form1.ClientWidth, Form1.ClientHeight, WHITENESS);The future is not a tablet with a 9″ screen no more than the future was a 9″ black & white screen in a box. It’s the paradigm that survives. (Kroc Camen)
Проверь себя! Онлайн тестирование | Мой блог
Последний раз редактировалось Вадим Мошев; 07.05.2019 в 23:12 .
Как очистить canvas
Взято с http://delphiworld.narod.ru
Есть два хороших способа очистить Canvas. Их скорости очень близки. В первом способе используются возможности Delphi, во втором – WinAPI. Первый способ удобнее тем, что позволяет закрашивать Canvas любым цветом.
procedure TForm1. Button1Click ( Sender: TObject ) ;
Form1. Canvas . Brush . Color := clRed;
Form1. Canvas . FillRect ( Form1. ClientRect ) ;
PatBlt ( Form1. Canvas . Handle , 0 , 0 ,
Form1. ClientWidth , Form1. ClientHeight , WHITENESS ) ;
Автор советов: Даниил Карапетян
e-mail: delphi4all@narod.ru
Автор справки: Алексей Денисов
e-mail: aleksey@sch103.krasnoyarsk.su
InValidateRect ( Canvas. handle , NIL , True ) ;
Если вы используете холст формы, то попробуйте следующее:
Очистка холста (canvas) для перерисовки в JavaScript
В работе с HTML5 Canvas в JavaScript часто возникает необходимость полностью очистить холст для перерисовки. Например, при создании анимаций или игр, где изображения или объекты на холсте обновляются или перерисовываются постоянно.
Простой способ очистки canvas
Самый простой и распространенный способ очистки холста — это просто нарисовать поверх него новый прямоугольник с помощью метода fillRect() . Метод fillRect() принимает 4 аргумента: x, y, ширину и высоту прямоугольника.
var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // Заливаем все пространство холста цветом фона ctx.fillStyle = '#ffffff'; // белый цвет ctx.fillRect(0, 0, canvas.width, canvas.height); Однако, этот метод может быть неэффективен в случае, когда требуется часто очищать холст.
Эффективный способ очистки canvas
Если на холсте нет прозрачных областей, то более эффективным способом будет использование метода clearRect() . Этот метод удаляет все пиксели в указанной области и делает их полностью прозрачными.
var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // Очищаем все пространство холста ctx.clearRect(0, 0, canvas.width, canvas.height); Метод clearRect() работает быстрее, чем fillRect() , потому что он просто удаляет пиксели, а не перекрашивает их.
Вывод
При работе с Canvas важно выбирать правильный метод для очистки холста в зависимости от конкретной задачи. Если на холсте нет прозрачных областей, предпочтительнее использовать clearRect() , иначе — fillRect() .