ホームページ  >  記事  >  ウェブフロントエンド  >  H5 のキャンバスをクリアする方法は何ですか?

H5 のキャンバスをクリアする方法は何ですか?

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-27 13:37:172211ブラウズ

今回は、H5のキャンバスをクリアする方法と、H5のキャンバスをクリアするための注意事項を紹介します。実際のケースを見てみましょう。

canvasキャンバスをクリアする次の 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();  
}

これを読んだ後は、この方法を習得したと思います。この記事の事例はさらに興味深いです。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

HTML5で画像回転のアニメーション効果を実現する方法

キャンバスを使用してカスタムアバター機能を実装する方法

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

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