Как очистить канвас

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()

Как очистить 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. Что-то никакой подходящей процедуры не
нахожу. Рисую на Image1.Canvas

Игорь Розумняк
2003-09-19 06:18:10 UTC

«Очистить» я имею ввиду следующее: я рисовал на канве объекта TImege разные
линии, элипсы и т.п. А теперь хочу, чтоб всего того, что я рисовал не было,
чтоб было как до моего рисования.

Post by Игорь Розумняк
Подскажите, как очистить canvas. Что-то никакой подходящей процедуры не
нахожу. Рисую на Image1.Canvas

Тебе как минимум наодо объяснить, что значит очистить canvas, сделать что

прозрачной? Иначе канва ни когда не бывает чистой, она может быть
монотонной, может быть пестрой, но она всегда грязная.
Anatoly Podgoretsky
http://www.podgoretsky.com

Анатолий Братчук
2003-09-19 07:07:20 UTC

Post by Игорь Розумняк
«Очистить» я имею ввиду следующее: я рисовал на канве объекта TImege

Post by Игорь Розумняк
линии, элипсы и т.п. А теперь хочу, чтоб всего того, что я рисовал не

Post by Игорь Розумняк
чтоб было как до моего рисования.
см. FillRect
Anatoly Podgoretsky
2003-09-19 18:33:57 UTC

Hello, «Анатолий Братчук» !
You wrote to Игорь Розумняк on Fri, 19 Sep 2003 07:07:20 +0000 (UTC):

??>> «Очистить» я имею ввиду следующее: я рисовал на канве объекта TImege
АБ> разные
??>> линии, элипсы и т.п. А теперь хочу, чтоб всего того, что я рисовал не
АБ> было,
??>> чтоб было как до моего рисования.

При таком требовании FillRect не подойдет, только сохранение холста до
рисования, с последующим восстановлением.
FillRect удали что было до.

Канва для всех: стираем нарисованное

Итак, по итогам предыдущих статей цикла «canvas для всех» мы научили рисовать прямоугольники и пути, а также изменять их цвет и толщину линий прорисовки. Пришло время научиться стирать нарисованное непосильным трудом

Чтобы стереть какой либо участок канвы нужен лишь один метод — clearRect. Он делает каждый пиксель в указанной области прозрачным. Иначе говоря, холст очищается под прямоугольником, заданным в параметрах этой функции.

Чтобы очистить canvas полностью от рисунков следует использовать такой код:

ctx.clearRect(0,0, canvas.width, canvas.height);

Как и обещал, ничего сложного стирании нет.

На этом базовые основы рисования на канве изучены. Мало? Просто? Возможно. Цикл не закончен и будет продолжаться с постепенным усложнением задач и увеличением объемов получаемых знаний. Следите за новыми постами

Статья вам помогла?