Как удалить предыдущий рисунок с холста

Я пытаюсь напечатать дугу на странице html. Как я могу удалить уже нарисованную арку со страницы ?. Я написал код ниже.Как удалить предыдущий рисунок с холста

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="1200" height="1000" 
style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
/*ctx.beginPath(); 
ctx.arc(600,500,20, 0.5*Math.PI,2*Math.PI); 
ctx.stroke(); 

ctx.beginPath(); 
ctx.arc(600,500,40, 0.5*Math.PI,2*Math.PI); 
ctx.stroke(); 
*/ 
var radius=20; 
for (i=0; i<10; i++) 
{ 
    var ctx = c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(600,500,radius, 0.5*Math.PI, 2*Math.PI); 
    ctx.stroke(); 
    radius= radius+30; 
} 


</script> 

</body> 
</html>

Как я могу достичь этого ?.

источник

2014-12-13 DrunkenMaster

Внесение изменений в содержимое холста html включает (1) очистку холста от его предыдущего содержимого - 'context.clearRect', а затем (2) перерисовку всего текущего желаемого содержимого. – markE

Вызов clearRect метода:

ctx.clearRect(0, 0, 1200, 1000)

Четыре аргумента:

ось-Х левого верхнего угла области протирать
ось-Y левого верхнего угла площадь для протирки
ширина участка для протирки
высота участка для протирки

Таким образом, с помощью этого метода вы можете стереть либо весь холст, либо только определенную его часть.

источник

2014-12-13 12:17:15 Leo

Это вид superset remove, если у меня есть еще один круг, он вытирает оба. не удается ли очистить только дугу? – DrunkenMaster

@ user3796318 Если это ваш случай, обычный подход заключается в том, чтобы нарисовать другую дугу в точно таком же положении с цветом фона. Однако это может быть только практичным, если фон является сплошным цветом. Так что другой подход ... ну, протрите холст и переделайте все, что вам нужно. – Leo

Спасибо за ответ;). Таким образом, точка «забрать» не позволяет очистить объект, который мы сгенерировали с помощью ctx.arc (600 500, радиус, 0.5 * Math.PI, 2 * Math.PI); вероятно, что-то вроде ctx.arcclear (.. тот же параметр)? :) – DrunkenMaster

Растровое изображение - это не векторная графика. Вы не можете просто удалить или изменить те вещи, которые вы нарисовали ранее. Рисуя на холсте, вы изменяете значения цвета пикселя своих данных изображения. Если вам нужно отменить все, вам необходимо самостоятельно сохранить отдельную структуру данных с соответствующими данными.

Например, вы можете создать копию данных изображения перед тем, как нарисовать что-нибудь. Затем вы можете вернуться к этому снимку впоследствии. HTMLCanvasElement#toDataURL возвращает полное изображение в качестве URL-адреса, который вы можете использовать как src изображения. Позже вы можете нарисовать это изображение на холсте, чтобы вернуть все последующие изменения. HTMLCanvasElement#toBlob делает примерно то же самое, но возвращает blob. Это может потреблять меньше памяти, но это немного неудобно использовать. Самый удобный способ - CanvasRenderingContext2D#getImageData. Вы даже можете использовать его для копирования только небольшой части изображения. Это полезно, если у вас большой холст, но только модифицируйте пиксели в небольшом регионе.

Другим способом отмены изменений является поддержание подробного списка ваших шагов. Например, всякий раз, когда вы рисуете дугу, вы сохраняете точные параметры как одну запись в списке. steps.push({type: 'stroke', style: 'rgb(0,0,0)', shapes: [{type: 'arc', x: 600, y: 500, radius: radius, from: 0.5 * Math.PI, to: 2 * Math.PI}]}) Вы можете удалить, изменить или изменить элементы в этом списке по своему усмотрению и получить всю необходимую информацию для рисования полученного изображения с нуля. По сути, вы внедрили еще одну векторную графическую библиотеку.

источник

2014-12-13 13:53:04 Robert

Как удалить предыдущий рисунок с холста

ответ

Смежные вопросы