解决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>

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

图片无法显示

解决方法：

在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>

__EOF__

作　　者：ღKawaii
出　　处：https://www.cnblogs.com/kmsfan/p/3484763.html
关于博主：一个普通的小码农，为了梦想奋斗
版权声明：署名 - 非商业性使用 - 禁止演绎，协议普通文本 | 协议法律文本。
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！

posted @ 2013-12-21 02:41 yangliwen 阅读(1577) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？

公告

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

昵称： yangliwen
园龄： 11年6个月
粉丝： 206
关注： 78

+加关注

2025年3月

日

一

二

三

四

五

六

KMSFan

程序员最怕的不是 BUG，而是孤独。我最怕的不是失去你，而是从不曾拥有你。

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

公告

ღKawaii

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

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (12)

随笔档案 (168)

阅读排行榜

评论排行榜

推荐排行榜