html5学习笔记（系列4）

参照w3cschool中的示例 ，根据文章中的代码编写的网页是不能在canvas中显示图像的，原代码

<canvas id="myCanvas" 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("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="eg_flower.png"
cxt.drawImage(img,0,0);
</script>

实际上在浏览器显示，调用cxt.drawImage时，图片可能没有加载，导致显示区域为空，正确的使用方法应为：

<script type="text/javascript">
        var mycan = document.getElementById("mycanvas4");
        var ctx = mycan.getContext("2d");
        var img = new Image()
        img.src = "eg_flower.jpg"
        img.onload = function(){ctx.drawImage(img,0,0);}
    </script>