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

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

php中世界最好的语言
リリース: 2018-03-27 13:37:17
オリジナル
2237 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート