最终效果图如下

我按照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. 使用VS+VisualGDB编译Linux版本RCF

    RPC通信框架--RCF介绍中说了,RCF本身是支持跨平台的,其代码放到Linux平台,是可以通过gcc.make等工具,编译通过的. 官方提供的源码中,只有cmake编译脚本,并没有提供Makefi ...

  2. 【VC++技术杂谈007】使用GDI+进行图片格式转换

    本文主要介绍如何使用GDI+对图片进行格式转换,可以转换的图片格式为bmp.jpg.png. 1.加载GDI+库 GDI+是GDI图形库的一个增强版本,提供了一系列Visual C++ API.为了使 ...

  3. 修改TNSLSNR的端口

    oracle 服务一启动 TNSLSNR.exe 会占用8080端口,这时,如果我们其他程序需要使用8080端口就会比较麻烦,所以需要改一下端口: 用dba账户登录 CMD>sqlplus sy ...

  4. EF：oracle的number类型映射为C#的boolean类型

    一开始用下面的方法映射, Property(p => p.IsFixed).HasColumnName("IS_FIXED").HasColumnType("num ...

  5. TODO：小程序的春天你想做什么

    TODO:小程序的春天你想做什么 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 初步了解小程序的特点 导航明确,来去自如 统一稳定, 视觉规范 ...

  6. Java中常见的29个运行异常

    ArithmeticException, ArrayStoreException, BufferOverflowException, BufferUnderflowException, CannotR ...

  7. 初学者--bootstrap（四）栅格系统----在路上（8）

    ---------------------------------------栅格系统:是bootstrap提供的响应式布局方式------------------------------------ ...

  8. SQL注入

    @org.junit.Test public void testLogin() { CardDAO cd=new CardDAO(); if(cd.dengru("' or 1 = 1--& ...

  9. JS-underfined is not a function

  10. Sql Server系列：查询分页语句

    1 利用临时表分页 分页存储过程: CREATE PROCEDURE [USP_Product_GetPaged] ), ), @PageIndex INT, @PageSize INT AS BEG ...