html网页中load载入图片的方式_load加载图-优快云博客

本文探讨了HTML5 Canvas中使用drawImage方法时图片加载失败的问题，并提供了三种不同的解决方案：通过body标签的onload方法、对Image对象使用onload事件处理程序以及使用window.onload方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

      最近在研究html5,发现一个问题。就是canvas中如果drawImage()，第一次打开这个网页图片会加载不出来。以下是三种加载图片的方法。

1. 在body标签中添加onload方法。

<body onload="what()">

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

<script type="text/javascript">
function what(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="flower.png";
cxt.drawImage(img,0,0);}
</script>

</body>

    像这样写第一次页面时加载不出来这幅图片的。

   2.对image应用onload方法

<canvas id="myCanvas" width="400" height="200" 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="flower.png";
img.onload=function(){
cxt.drawImage(img,0,0);}
</script>
   3.使用window.onload方法
<canvas id="myCanvas" width="400" height="200" 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="flower.png";
window.onload=function(){
cxt.drawImage(img,0,0);}
</script>