解决CHROME中画布中无法显示图片的方法

最终效果图如下

解决CHROME中画布中无法显示图片的方法

我按照W3SCHOOL里面的方法,代码如下

<!DOCTYPE html>

<html>

<body>



<script type="text/javascript">





var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("tulip");

ctx.drawImage(img,10,10);



//tulip.src="eg_tulip.jpg";





</script>

<p>要使用的图像:</p>

<img id="tulip" src="eg_tulip.jpg" alt="The Tulip" />



<p>画布:</p>

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">

Your browser does not support the HTML5 canvas tag.

</canvas>











</body>

</html>

  但是在谷歌浏览器显示如下:

解决CHROME中画布中无法显示图片的方法

图片无法显示

解决方法:

在body的onload方法里加载script段里的代码就Ok了,代码如下

<!DOCTYPE html>

<html>



<!--加一个方法ONLOAD时候用上-->

<body onLoad="abc()">



<script type="text/javascript">



/*这里做成一个方法,方便ONLOAD时调用*/

function abc()

{

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("tulip");

ctx.drawImage(img,10,10);

}

//tulip.src="eg_tulip.jpg";





</script>

<p>要使用的图像:</p>

<img id="tulip" src="eg_tulip.jpg" alt="The Tulip" />



<p>画布:</p>

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">

Your browser does not support the HTML5 canvas tag.

</canvas>











</body>

</html>

  

你可能感兴趣的:(chrome)