この記事では、HTML5 でdrawImage を使用するときに発生する問題と解決策を分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。 画像の使用時に発生した問題: コードをコピー コードは次のとおりです: < !DOCTYPE html> < スクリプト src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"> <br> $(function() {<br> var jsCanv = document.getElementById("canv");<br> var oCanv = jsCanv.getContext("2d");<br> var img = new Image( );<br> img.src = "img.png";<br> oCanv.drawImage(img, 220, 30) <br> })<br> ブラウザは をサポートしていません 実はこの書き方は間違っており、画像が更新されている間は表示されません。更新後に正常に表示されるようにするには、イメージのロード時に再描画する必要があります。 chrome 19 で発生する問題をテストします。 解決策 コードをコピーコードは次のとおりです: <スクリプト src= "js /jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"> <br> $(function() {<br> var jsCanv = document.getElementById("canv");<br> var oCanv = jsCanv.getContext("2d");<br> var img = new Image();<br> img.src = "img.png";<br> img.onload = function() {<br> oCanv.drawImage(img, 220, 30); <br> }<br> })<br> < ;/ script><br> </head><br> <body><br> <canvas id="canv" width="500" height="500"><br> ブラウザはサポートしていません<br> </canvas><br> </body><br></html></div> <p>この記事が皆様の HTML5 プログラミング設計に役立つことを願っています。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
