html5 drawImage 不顯示問題

2016/01/23 73324

清華大佬耗費三個月吐血整理的幾百G的資源，免費分享！....>>>

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>