最终效果图如下

我按照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. 关于i++,++i 的理解

    由于经常有同学在遇到 i++.++i 时犯困难.所以举例说明一下: int i = 20;        int sum = i++ * 30; //这个等式中 i = 20        int s ...

  2. 下订单存储过程 - MYSQL

    BEGIN DECLARE smark INT; DECLARE orderId INT; /*查询课程是否存在,如果不存在就不执行订单操作了*/ ) FROM t_course WHERE id = ...

  3. 浅析PHP中for与foreach两个循环结构遍历数组的区别

    遍历一个数组是编程中最常见不过的了,这里跟大家讨论下for和foreach两种方法.用这两种方法执行遍历的场景太多太多了,这里我们只针对以下两个数组作为例子来讨论.所谓管中窥豹,多少能理清一点两者的区 ...

  4. [LeetCode]444. Sequence Reconstruction

    Check whether the original sequence org can be uniquely reconstructed from the sequences in seqs. Th ...

  5. 借助cookie实现子网页修改父网页内容遇到的问题：同一个浏览器访问相同页面，会互相影响。 （已解决）

    问题是这样的,  我把左侧菜单做成了网页, 然后点击左侧菜单选项会改变右侧内容, 也就是子网页访问并修改父网页的内容. 为了兼容性更好, 我没有使用farther,或者opener等方法,  而是用了 ...

  6. eclipse构建maven的web项目

    如果以后要创建maven的web项目,可以参考这个链接 http://blog.csdn.net/smilevt/article/details/8215558/

  7. linux下git以及github的连接与使用

    简单理解 Git 的思想和基本的工作原理,能够更好的进一步和使用Git.在开始学习Git 的时候,最好不要把Git的各种概念和其他的版本控制系统诸如 Subversion 等相比,否则容易混淆每个操作 ...

  8. 【Java并发编程实战】-----synchronized

    在我们的实际应用当中可能经常会遇到这样一个场景:多个线程读或者.写相同的数据,访问相同的文件等等.对于这种情况如果我们不加以控制,是非常容易导致错误的.在java中,为了解决这个问题,引入临界区概念. ...

  9. ASP.NET MVC 控制器激活(一)

    ASP.NET MVC 控制器激活(一) 前言 在路由的篇章中讲解了路由的作用,讲着讲着就到了控制器部分了,从本篇开始来讲解MVC中的控制器,控制器是怎么来的?MVC框架对它做了什么?以及前面有的篇幅 ...

  10. 2013 duilib入门简明教程 -- XML基础类(7)

    现在大家应该对XML描述界面不那么陌生了,那么我们做进一步介绍. 前面的教程我们写了很多代码,为的是让大家了解下基本流程,其实duilib已经对常用的操作做了很好的包装,正式使用时无需像前面的教程那样 ...