Artikel ini menganalisis masalah dan penyelesaian yang dihadapi apabila menggunakan drawImage dalam HTML5. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut: Masalah yang dihadapi semasa menggunakan Imej: Salin kod Kod adalah seperti berikut: < !DOCTYPE html> <br> $(function() {<br> var jsCanv = document.getElementById("canv");<br> var oCanv = jsCanv.getContext("2d");<br> var img = new Imej( );<br> img.src = "img.png";<br> oCanv.drawImage(img, 220, 30); kepala</p> <p> <body><br> <canvas id="canv" width="500" height="500"><br> Penyemak imbas tidak menyokong <br> </canvas><br> < ;/body><br></html><br><br> <br>Sebenarnya cara penulisan ini adalah salah sebenarnya, selagi gambar itu di refresh, ia tidak akan dipaparkan. Untuk memastikan paparan biasa selepas muat semula, ia perlu dilukis semula apabila Imej dimuatkan. Uji masalah yang akan berlaku di bawah chrome 19. </div> Penyelesaian<p></p> <p><br><br></p> <div class="msgheader">Salin kod<div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode27'));"><u>Kodnya adalah seperti berikut:</u></span><!DOCTYPE html> ;</div><html></div> <head><div class="msgborder" id="phpcode27"> <meta charset="utf-8"><br> <title></title><br> <skrip 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); ;/ skrip><br> </head><br> <body><br> <canvas id="canv" width="500" height="500"><br> Penyemak imbas tidak menyokong <br> </canvas><br> </body><br></html><br><br> <br>Saya harap artikel ini akan membantu reka bentuk pengaturcaraan HTML5 semua orang. <br> </div>