ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5クリアキャンバスコードとは何ですか

HTML5クリアキャンバスコードとは何ですか

藏色散人
藏色散人オリジナル
2023-01-28 09:53:322385ブラウズ

html5 キャンバスのクリア コー​​ドには、次の 3 種類があります: 1. 「関数 clearCanvas{...}」コードを使用してキャンバスをクリアします。 2. clearRect メソッドを使用してキャンバスをクリアします。 3. 「関数」を使用します。 clearCanvas(){var c=document .getElementById("myCanvas");var cxt=c.getContext("2d")..." このコードはキャンバスをクリアします。

HTML5クリアキャンバスコードとは何ですか

このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、DELL G3 コンピューター

クリアするコードは何ですかHTML5のキャンバス?

html5 キャンバスをクリアする方法

キャンバスをクリアする次の 3 つの方法を要約します:

1. 最も簡単な方法: キャンバスによる高さまたは幅がリセットされるたびに、キャンバスのコンテンツがクリアされるため、次のメソッドでクリアできます:

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

2。clearRect メソッドを使用します:

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

3。方法 2 では、キャンバスを特定の色で塗りつぶして、キャンバスをクリアするという目的を達成できます。

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

推奨される学習: 「HTML5 ビデオ チュートリアル

以上がHTML5クリアキャンバスコードとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。