ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5/6 __Canvas: 画像を挿入し、画像がロードされたときにコールバックを実行します

HTML5/6 __Canvas: 画像を挿入し、画像がロードされたときにコールバックを実行します

黄舟
黄舟オリジナル
2017-02-18 14:29:151455ブラウズ

キャンバス API に組み込まれているいくつかの簡単なコマンドを使用して、画像コンテンツをキャンバスに簡単に追加できます。

注意してください: 画像を操作するには、通常、ブラウザが非同期で読み込まれるまで待つ必要があります。ページスクリプトが実行されている様子。 完全にロードされる前に画像をキャンバスにレンダリングしようとすると、画像は表示されません

次の例では、キャンバスで使用するために樹皮テクスチャの画像を木の幹としてロードします。レンダリング前に画像がレンダリングされること 画像メモリが完全にロードされること。つまり、後続のコードは画像がロードされるときにのみ実行されます



ご覧のとおり、bark.jpg 画像には onload 関数が追加されており、画像がロードされたときにのみdrawTrails 関数が呼び出されるようになっています。

添付ファイル、bark.jpg 画像:


上記は HTML5 No. 6 __Canvas: 画像が読み込まれたときに画像を挿入します。 実行コールバックの内容 詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。


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