Как очистить холст для перерисовки

Question

После экспериментов с составными операциями и рисования изображений на холсте, я сейчас пытаюсь удалить изображения и композитинг. Как мне это сделать?

Мне нужно очистить холст для перерисовки других изображений; это может продолжаться некоторое время, поэтому я не думаю, что каждый раз рисование нового прямоугольника будет наиболее эффективным вариантом.

Answer 1

Это сработало для моего pieChart в chart.js

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

Answer 2

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

Answer 3

в webkit вам нужно установить ширину в другое значение, затем вы можете установить его обратно в начальное значение

Answer 4

Я обнаружил, что во всех браузерах, которые я тестирую, самый быстрый способ - это заполнить Rect белым или любым другим цветом, который вы хотите. У меня очень большой монитор, и в полноэкранном режиме clearRect мучительно медленен, но fillRect оправдан.

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

Недостатком является то, что холст больше не является прозрачным.

Answer 5

Простой, но не очень читаемый способ - написать так:

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

Answer 6

самый быстрый способ:

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

Answer 7

Я всегда использую

cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);

Answer 8

Context.clearRect(starting width, starting height, ending width, ending height);

Пример: context.clearRect(0, 0, canvas.width, canvas.height);

Answer 9

Если вы используете только clearRect, если у вас есть форма для отправки чертежа, вы получите отправку вместо очистки, или, возможно, сначала ее можно очистить, а затем загрузить недействительный чертеж, так что вам понадобится чтобы добавить warnDefault в начале функции:

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

Надеюсь, это кому-нибудь поможет.

Answer 10

context.clearRect(0,0,w,h)   

заполнить данный прямоугольник значениями RGBA:
0 0 0 0: с Chrome
0 0 0 255: с FF & Safari

Но

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

пусть прямоугольник заполнен
0 0 0 255
независимо от браузера!