html网页中load载入图片的方式

最新推荐文章于 2024-09-15 10:12:57 发布

原创最新推荐文章于 2024-09-15 10:12:57 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #browser #image #border #function #html5

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

      最近在研究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>