最终效果图如下

我按照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>

　　

解决CHROME中画布中无法显示图片的方法的更多相关文章

  1. Java中显示图片的方法

    最近在做一个swing小项目,其中需要把存储在硬盘中的图片文件显示出来,总结了如下方法: 1. Graphics g = getGraphics();String name = "E:/Ca ...

  2. [AX]AX2012 R2 EP员工自助服务中的产品不能显示图片的问题

    在员工自助服务EP站点中员工可以通过Order products自助提交采购申请,在正确设置员工采购目录后会罗列出允许员工购买的产品,每个产品都可带有图片,我们可以通过Product image来为产 ...

  3. vue中通过定义的数组循环将img的src引入图片却不显示图片问题解决方法

    需要前端循环图片数组将其放到页面中去. 需要将src渲染到页面中,如果单纯写src的路径会出现不显示图片的问题 因为图片路径在assets,所以需要require一下.

  4. win7中资源管理器不能显示图片预览的解决方法

    在用xp的时候,在资源管理器里面预览图片文件是在普通不过的事情了.换到win7之后,图片文件一直不能预览,只是显示图标还挺烦的.肯定是哪里设置的不对,下午闲来无事,找到是哪里的问题了. 如果你也遇到相 ...

  5. 【Vue中的坑】vue项目中动态绑定src不显示图片解决方法

    v-for绑定src的数据如下: data() { return { img_src:"../../assets/images/mirror-service.png" } } 渲染 ...

  6. Android 代码中文字在手机上显示乱码问题解决方法

    在学习Android过程中,用于测试时发现,代码中的中文在真机上会显示乱码, 网上查阅了些资料,参考如下: http://www.androidchina.net/3024.html http://b ...

  7. Qtcreator中printf()/fprintf()不显示问题处理方法

    此处只介绍解决办法,有兴趣的朋友可以分析原因. [问题] 使用Qtcreator开发项目中,printf()的诊断信息,在“应用程序输出”窗口不显示. [解决方法] 1.printf()不显示解决示例 ...

  8. 解决Chrome关联Html文件图标显示为空白

    用记事本保存为ChromeHTML.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\CLSID\{42042206-2D85-1 ...

  9. 解决chrome css本地映射不成功&&附带映射方法

    解决办法:把本地文件夹名改成英文的(不要有中文) 顺便写一下怎么把在chrome调试的本地项目中的css映射到本地: 1.F12(option+command+i)启动chrome调试工具 2.打开s ...

随机推荐

  1. PowerDesigner连接SQL Server

    以前听说过PowerDesigner可以和数据库连接,根据在PowerDesigner创建的数据模型创建表.触发器.存储过程到数据库中.也可以将已有的数据库导出到PowerDesigner中为数据模型 ...

  2. select 相关

    获取select :获取select 选中的 text : ? 1 $("#ddlregtype").find("option:selected").text( ...

  3. Python黑帽编程 3.1 ARP欺骗

    Python灰帽编程 3.1 ARP欺骗 ARP欺骗是一种在局域网中常用的攻击手段,目的是让局域网中指定的(或全部)的目标机器的数据包都通过攻击者主机进行转发,是实现中间人攻击的常用手段,从而实现数据 ...

  4. 仿花田：相亲网站 意中人 已在GitHub上开源

    在园友的强烈呼唤下,我还是负责任的分享给大家,因为对代码比较熟悉一下,还是有些问题要说明,不然别人看起来会比较费劲.说实话除了这个bootstrap的界面风格和这件事情本身对大家有吸引力之外,内部的逻 ...

  5. 几个毫无节操纯属恶搞的JavaScript插件

    fartscroll.js,为放屁而生 你知道么,有了这个js库,你的页面就可以——————————放屁勒! 打开下面的演示地址,然后滚动页面. 在线演示:http://theonion.github ...

  6. Functional Programming without Lambda - Part 2 Lifting, Functor, Monad

    Lifting Now, let's review map from another perspective. map :: (T -> R) -> [T] -> [R] accep ...

  7. 操作数据库mysql

    显示表结构 desc 表 显示数据库信息 show  create database 数据库名 show create table 表名

  8. yar框架使用笔记

    Yar是什么 Yar是并行的RPC框架(Concurrent RPC framework),Laruence开发. 安装 下载地址:http://pecl.php.net/package/yar wi ...

  9. CSS系列：CSS文字样式

    1. 设置字体 在CSS中字体通过font-family属性来设置. font-family: Verdana, Arial, Helvetica, sans-serif; 上面的字体设置告诉浏览器首 ...

  10. IOS开发资料汇总

    1 IOS账号注册.程序发布流程 1)http://jamesli.cn/blog/?p=955 2)http://jamesli.cn/blog/?p=966 3)http://jamesli.cn ...