What is the html5 clear canvas code

html5 There are three types of canvas clearing codes: 1. Clear the canvas through the "function clearCanvas{...}" code; 2. Use the clearRect method to clear the canvas; 3. Use "function clearCanvas(){var c=document .getElementById("myCanvas");var cxt=c.getContext("2d")..." The code clears the canvas.

The operating environment of this tutorial: Windows 10 system, HTML5 version, DELL G3 computer

What is the code to clear the canvas in html5?

html5 clear canvas method

Summarize the following three ways to clear the canvas:

1. The simplest method: due to canvas Whenever the height or width is reset, the canvas content will be cleared, so it can be cleared with the following method:

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

Recommended learning: "HTML5 Video Tutorial"

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