Three ways to clear the canvas in html5

This article mainly introduces the HTML5 clearing canvas method (three methods). The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look.

Summarize the following three ways to clear the canvas:

1. The simplest method: Because whenever the height or width of the canvas is reset, the canvas The content will be cleared, so you can use the following method to clear it:

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

2. Use the clearRect method:

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

3. Similar to method 2, you can fill the canvas with a specific color to achieve the purpose of clearing it:

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();  
}

The above is the detailed content of Three ways to clear the canvas in html5. For more information, please follow other related articles on the PHP Chinese website!