html5-canvas
Het scherm wissen

Syntaxis

• void clearRect (x, y, breedte, hoogte)
• ImageData createImageData (breedte, hoogte)

Opmerkingen

rechthoeken

U kunt de methode clearRect gebruiken om elk rechthoekig gedeelte van het canvas te wissen.

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

Opmerking: clearRect is afhankelijk van de transformatiematrix.

Om dit aan te pakken, is het mogelijk om de transformatiematrix opnieuw in te stellen voordat u het canvas wist.

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

Opmerking: ctx.save en ctx.restore zijn alleen vereist als u de 2D-context van het canvas wilt behouden. In sommige situaties kan opslaan en herstellen traag zijn en moet over het algemeen worden vermeden als dit niet nodig is.

Ruwe afbeeldingsgegevens

Het is mogelijk om rechtstreeks naar de gerenderde afbeeldingsgegevens te schrijven met putImageData . Door nieuwe afbeeldingsgegevens te maken en deze vervolgens aan het canvas toe te wijzen, wist u het hele scherm.

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

Opmerking: putImageData wordt niet beïnvloed door transformaties die op de context worden toegepast. Het schrijft gegevens rechtstreeks naar het gerenderde pixelgebied.

Complexe vormen

Het is mogelijk om complex gevormde gebieden te wissen door de eigenschap globalCompositeOperation wijzigen.

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

Duidelijk canvas met verloop.

In plaats van clearRect , waardoor alle pixels transparant zijn, wilt u misschien een achtergrond.

Wissen met een verloop

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

Dit is ongeveer de helft zo snel 0.008ms als clearRect 0.004ms maar de 4miljoenen van een seconde zouden geen realtime animatie negatief moeten beïnvloeden. (Tijden variëren aanzienlijk, afhankelijk van apparaat, resolutie, browser en browserconfiguratie. Tijden zijn alleen ter vergelijking)

Duidelijk canvas met behulp van samengestelde bewerking

Wis het canvas met behulp van de compositing-bewerking. Dit wist het canvas onafhankelijk van transformaties, maar is niet zo snel als clearRect() .

ctx.globalCompositeOperation = 'copy';

alles wat hierna wordt getekend, zal vorige inhoud wissen.