Když jsme vytvořili plátno, někdy ho budeme chtít úplně vyčistit, než překreslíme něco jiného. Podívejme se, jak to udělat.
Jak vyčistit HTML Canvas pro překreslení
Řekněme, že máme plátno a již jsme napsali kód takto:
let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');
Pokud chceme vyčistit celé plátno a nechat ho prázdné, použijeme clearRect() . clearRect má 4 argumenty - x , y , width a height .
Pokud chceme plátno úplně vyčistit, počínaje (0, 0) , náš kód vypadá takto:
let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
I když můžeme vyčistit různé oblasti, pokud chceme. Níže uvedený kód vymaže plátno začínající na souřadnicích xy (150, 150) a vymaže pouze 100 x 150 pixelů (šířka x výška) obsahu:
let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');
ctx.clearRect(150, 150, 100, 150);
Vymazání HTML plátna s vlastní barvou
Chcete-li vymazat plátno vlastní barvou, můžete místo toho použít normální rect() funkce, s vlastní barvou. To vypadá takto:
let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');
ctx.rect(0, 0, myCanvas.width, myCanvas.height);
// Fill our rectangle
ctx.fillStyle = 'red';
ctx.fill();
Výše uvedený kód vyčistí naše plátno a místo toho ho vyplní červenou barvou.