最终效果图如下

我按照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. php中htmlspecialchars()函数和addslashes()函数的使用和区别

    在防止被注入攻击时,常会用到两个函数:htmlspecialchars()和addslashes()函数.这两个函数都是对特殊字符进行转义. 1)addslashes()作用及使用 addslashe ...

  2. 仿JQ基础架构，可扩展。

    (function(win,doc,fn){     var events = [];//拷贝核心方法    var publicEvent = ["extend","f ...

  3. 解决Unity5+Vuforia+Network本地联机发布到Android上白屏的问题

    Unity5+Vuforia+Network本地联机,在Android下点击联机,然后识别模型就出现白屏,点击屏幕上相应位置的按钮(已白屏,但点击该看不见的按钮)还是能起作用,如跳转到其他场景正常. ...

  4. WPF整理-使用用户选择主题的颜色和字体

    “Sometimes it's useful to use one of the selected colors or fonts the user has chosen in theWindows ...

  5. Delphi中stringlist分割字符串的用法

    Delphi中stringlist分割字符串的用法 TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 1.CommaT ...

  6. 使用PowerShell找出具体某个站点所使用的模板(Web Template)名称？

    $web = get-spweb –identity http://servername/sites/site/web #得到站点的对象 $web.WebTemplate #得到WebTemplate ...

  7. ASP.NET MVC 和 Ruby 相结合的Web框架Oak

    在http://www.asp.net/mvc/open-source 上有个项目Oak: Frictionless development for ASP.NET MVC single page w ...

  8. MVC学习二：基础语法

    目录 一:重载方法的调用 二:数据的传递 三:生成控件 四:显示加载视图 五:强类型视图 六:@Response.Write() 和 @Html.Raw()区别 七:视图中字符串的输入 八:模板页 一 ...

  9. CSS3 Animation制作飘动的浮云和星星效果

    带平行视差效果的星星 先看效果: 如果下方未出现效果也可前往这里查看 http://sandbox.runjs.cn/show/0lz3sl9y 下面我们利用CSS3的animation写出这样的动画 ...

  10. ASP.NET Web API的Controller是如何被创建的？

    Web API调用请求的目标是定义在某个HttpController类型中的某个Action方法,所以消息处理管道最终需要激活目标HttpController对象.调用请求的URI会携带目标HttpC ...