Sök…
Syntax
- void clearRect (x, y, bredd, höjd)
- ImageData createImageData (bredd, höjd)
Anmärkningar
Ingen av dessa metoder kommer att producera transparenta pixlar om kontexten skapades med parametern alpha: false
.
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
ochctx.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.