html5-canvas
Czyszczenie ekranu

Składnia

• void clearRect (x, y, szerokość, wysokość)
• ImageData createImageData (szerokość, wysokość)

Uwagi

Prostokąty

Możesz użyć metody clearRect , aby usunąć dowolny prostokątny przekrój płótna.

// Clear the entire canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

Uwaga: clearRect zależy od macierzy transformacji.

Aby sobie z tym poradzić, możliwe jest zresetowanie macierzy transformacji przed wyczyszczeniem obszaru roboczego.

ctx.save();                                       // Save the current context state
ctx.setTransform(1, 0, 0, 1, 0, 0);               // Reset the transformation matrix
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.restore();                                    // Revert context state including 
                                                  // transformation matrix

Uwaga: ctx.save i ctx.restore są ctx.restore tylko wtedy, gdy chcesz zachować stan kontekstu płótna 2D. W niektórych sytuacjach zapisywanie i przywracanie może być powolne i ogólnie należy go unikać, jeśli nie jest to wymagane.

Surowe dane obrazu

Możliwe jest zapisywanie bezpośrednio do renderowanych danych obrazu za pomocą putImageData . Tworząc nowe dane obrazu, a następnie przypisując je do obszaru roboczego, wyczyścisz cały ekran.

var imageData = ctx.createImageData(canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);

Uwaga: na putImageData nie mają wpływu żadne transformacje zastosowane w kontekście. Zapisuje dane bezpośrednio w renderowanym regionie pikseli.

Złożone kształty

Możliwe jest usuwanie regionów o złożonym kształcie poprzez zmianę właściwości globalCompositeOperation .

// All pixels being drawn will be transparent
ctx.globalCompositeOperation = 'destination-out';

// Clear a triangular section
ctx.globalAlpha = 1;    // ensure alpha is 1
ctx.fillStyle = '#000'; // ensure the current fillStyle does not have any transparency
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.lineTo(20, 10);
ctx.fill();

// Begin drawing normally again
ctx.globalCompositeOperation = 'source-over';

Wyczyść płótno z gradientem.

Zamiast używać clearRect który sprawia, że wszystkie piksele są przezroczyste, możesz chcieć tła.

Aby wyczyścić za pomocą gradientu

// create the background gradient once
var bgGrad = ctx.createLinearGradient(0,0,0,canvas.height);
bgGrad.addColorStop(0,"#0FF");
bgGrad.addColorStop(1,"#08F");

// Every time you need to clear the canvas
ctx.fillStyle = bgGrad;
ctx.fillRect(0,0,canvas.width,canvas.height);

Jest to około połowa tak szybkiego 0.008ms jak czystyRekt 0,004 0.004ms ale 4 miliony sekund nie powinny mieć negatywnego wpływu na animację w czasie rzeczywistym. (Czasy będą się znacznie różnić w zależności od urządzenia, rozdzielczości, przeglądarki i konfiguracji przeglądarki. Czasy są tylko dla porównania)

Wyczyść płótno za pomocą operacji złożonej

Wyczyść płótno za pomocą operacji komponowania. Spowoduje to wyczyszczenie obszaru roboczego niezależnie od przekształceń, ale nie będzie tak szybkie jak clearRect() .

ctx.globalCompositeOperation = 'copy';

cokolwiek narysowane dalej usunie poprzednią zawartość.