html5 drawImage 不顯示問題

atts 8年前發布 | 4K 次閱讀 JavaScript HTML5

html5在使用drawImage繪圖的時候，出現刷新就不顯示的問題，原來要想是圖片正常顯示需要為圖片添加一個onload事件，直接看代碼

<!DOCTYPE HTML>
<html>
    <head>
        <meta content="text/html" charset="utf8">
    </head>
<body>


<canvas id="myCanvas4" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">


var c=document.getElementById("myCanvas4");
var cxt=c.getContext("2d");
var img=new Image();
img.src="./images/50ab2f61403bf44f.png";
img.onload=function(){
    cxt.drawImage(img,0,0);

};
cxt.drawImage(img,0,0);
</script>
</body>
</html></pre>
 本文由用戶 atts 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！