이 글에서는 HTML5에서 drawImage를 사용할 때 발생하는 문제와 해결 방법을 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다. 이미지 사용 시 발생하는 문제: 코드 복사코드는 다음과 같습니다. < !DOCTYPE html> < script 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> 머리 브라우저가 를 지원하지 않습니다. < ;/body> 사실 이런 방식은 잘못된 것입니다. 사실 이미지를 새로 고치면 표시되지 않습니다. 새로 고침 후 정상적인 표시를 보장하려면 이미지를 로드할 때 다시 그려야 합니다. Chrome 19에서 발생하는 문제를 테스트해 보세요. 해결책 코드 복사코드는 다음과 같습니다. <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>