Drei Möglichkeiten, die Leinwand in HTML5 zu leeren

In diesem Artikel wird hauptsächlich die HTML5-Clearing-Canvas-Methode vorgestellt (drei Methoden). Jetzt werde ich sie mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen.

Fassen Sie die folgenden drei Möglichkeiten zum Löschen der Leinwand zusammen:

Die einfachste Methode: Immer wenn die Höhe oder Breite der Leinwand zurückgesetzt wird Der Inhalt wird gelöscht, Sie können ihn also mit den folgenden Methoden löschen:

function clearCanvas<span style="font-family: Verdana, Arial, 宋体;">()</span>  
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
    c.height=c.height;  
}

2. Verwenden Sie die Methode „clearRect“:

function clearCanvas()  
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
    cxt.clearRect(0,0,c.width,c.height);  
}

3. Ähnlich wie bei Methode 2 können Sie die Leinwand mit einer bestimmten Farbe füllen, um sie zu löschen:

function clearCanvas()  
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
      
    cxt.fillStyle="#000000";  
    cxt.beginPath();  
    cxt.fillRect(0,0,c.width,c.height);  
    cxt.closePath();  
}

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten, die Leinwand in HTML5 zu leeren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!