html5-canvas
Rensar skärmen

Syntax

• void clearRect (x, y, bredd, höjd)
• ImageData createImageData (bredd, höjd)

Anmärkningar

rektanglar

Du kan använda metoden clearRect för att rensa alla rektangulära delar av duken.

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

Obs: clearRect är beroende av transformationsmatrisen.

För att hantera detta är det möjligt att återställa transformationsmatrisen innan du rensar duken.

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

Obs: ctx.save och ctx.restore endast om du vill behålla canvas 2D-kontextläget. I vissa situationer kan sparning och återställning vara långsam och bör i allmänhet undvikas om det inte krävs.

Rå bilddata

Det är möjligt att skriva direkt till den återgivna bilddata med putImageData . Genom att skapa nya bilddata och sedan tilldela dem på duken rensar du hela skärmen.

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

Obs: putImageData påverkas inte av några transformationer som tillämpas i sammanhanget. Det kommer att skriva data direkt till det återgivna pixelområdet.

Komplexa former

Det är möjligt att rensa komplexformade regioner genom att ändra egenskapen 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';

Klar duk med lutning.

Istället för att använda clearRect som gör alla pixlar transparenta kanske du vill ha en bakgrund.

För att rensa med en lutning

// 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);

Detta är ungefär hälften så snabb 0.008ms som clearRect 0.004ms men 4 miljoner sekund ska inte påverka någon realtidsanimation negativt. (Tiderna kommer att variera avsevärt beroende på enhet, upplösning, webbläsare och webbläsarkonfiguration. Tiderna är endast för jämförelse)

Rensa duk med sammansatt operation

Rensa duken med kompositionsfunktionen. Detta kommer att rensa duken oberoende av transformationer men är inte lika snabb som clearRect() .

ctx.globalCompositeOperation = 'copy';

allt som dras nästa kommer att rensa tidigare innehåll.