在书上看到用<canvas>绘制图像就动手试试，刚开始，我的代码是这样的：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>canvas绘图</title>

</head>

<body>

<canvas id="drawimg" width="500" height="500" style="border:1px solid black;">A drawimg of something.</canvas>

    <img id="image" src="01.jpg" style="display:none" />

<script>

var drawimg = document.getElementById("drawimg");

var image=document.getElementById("image");

 var context = drawimg.getContext("2d");

context.drawImage(image,10,10);

</script>

</body>

</html>
很可惜，在浏览器中只出现了一个黑线框，没有图片。我检查了一下，图片路径没有错，浏览器版本也支持，控制台也没有报错，，不科学啊。
然后去w3school查了一下drawImage()这个方法，还有样例代码，看了一下样例代码感觉差不多啊，于是复制过去，，将图片改成自己本地的图片，然而并没有什么用，还是没有显示出来。纠结万分于是去网上查了一下原因。
<script>

window.onload=function(){

var drawimg = document.getElementById("drawimg");

var image=document.getElementById("image");

var context = drawimg.getContext("2d");

context.drawImage(image,10,10);

}

</script>
这是改过的js代码，我将原来的那些代码放在了onload里面，图片在浏览器中就显示出来了。
因为图片是异步加载，onload 事件会在页面或图像加载完成后立即发生。在之前的代码中，执行js代码的时候图片还没有加载成功，就调用了drawImage()方法，所以图片就无法显示。

<canvas>drawImage()方法无法显示图片的更多相关文章

  1. canvas drawImage方法不显示图片的解决方案

    先复习一下用法: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 各个参数说明: 参数 描述 img 规定要使用的图像.画布 ...

  2. canvas - drawImage()方法绘制图片不显示的问题

    canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等.   问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...

  3. Canvas DrawImage截取和压缩图片的陷阱

    html5的canvas十分之强大,可以做到快速的截取压缩出新的图片! 不过最近开发过程中遇到一个问题,图片压缩后使用toDataURL取得图片显示为一片漆黑,什么都没有! 折腾了很久,起初以为是上传 ...

  4. canvas.drawImage()方法详解

    首先看html5.js /**@param {Element} img_elem@param {Number} dx_or_sx@param {Number} dy_or_sy@param {Numb ...

  5. canvas drawImage图片不显示问题

    初次学习canvas,用来做笔记记录下遇到的问题及解决方案 这里是要将一张图片写到canvas里,按照网上搜索,初写了段代码,可是却没显示,以为是路径问题,不能跨域名使用,后来改为相对路径后,仍然无效 ...

  6. Java中显示图片的方法

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

  7. Canvas的drawImage方法使用

    canvas是HTML5中的一个新元素,这个元素可以通过JavaScript用来绘制图形.例如可以用它来画图.合成图象.做一些动画等. 通常呢,我们在canvas上画图的方法是使用Image对象.基本 ...

  8. HTML5 Canvas绘图详解 drawImage() 方法 有图有真相！

    步骤 1 2 3 4 5   简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...

  9. python 读取并显示图片的两种方法

    在 python 中除了用 opencv,也可以用 matplotlib 和 PIL 这两个库操作图片.本人偏爱 matpoltlib,因为它的语法更像 matlab. 一.matplotlib 1. ...

随机推荐

  1. echarts之tooltip-position

    当postion为Array时 tooltip : { trigger: 'axis', position:[3,3] //赋予一个[x,y]的位置 } 当postion为function时 tool ...

  2. Java设置session超时（失效）的三种方式

    1. 在web容器中设置(此处以tomcat为例) 在tomcat-6.0\conf\web.xml中设置,以下是tomcat 6.0中的默认配置: <!-- ================= ...

  3. spark 2.0 中 pyspark 对接 Ipython

    pyspark 2.0 对接 ipython 在安装spark2.0 后,以往的对接ipython方法失效,会报如下错错误: 因为在spark2.0后对接ipython的方法进行了变更我们只需要在py ...

  4. 51nod 1712 区间求和

    题意 给你一个长度为 \(n\) 的序列,定义这个序列的权值为 $ \sum_{1 \leq i<j \leq n} a_j - a_i $. 现在给你一个长度为 \(n\) 的序列,当$ a_ ...

  5. SQLite 的创建与编辑

    创建数据库语句 -(void)creatData { sqlite3 *sqlite = nil; NSString *filePath = [NSHomeDirectory() stringByAp ...

  6. 苹果手机微信上form表单提交的问题

    场景:前端页面请求后端php,返回带form表单dom元素,然后将其追在页面上,返回的html字段中包含表单自动提交的代码,想法是将带有表单自动提交的dom元素追加到页面上,然后表单自动提交到另外一个 ...

  7. Linux 学习记录

    整理学习Linux操作系统遇到的不理解的概念.逐个进行补充.我们用的版本是CentOs. what's the gcc? what's the yum? what's the wget?

  8. 【BZOJ】4056: [Ctsc2015]shallot

    题意 在线.可持久化地维护一条二维平面上的折线,支持查询与任意一条直线的交点个数. 点的个数和操作个数小于\(10^5\) 分析 一条折线可以用一个序列表示,可持久化序列考虑用可持久化treap. 如 ...

  9. knockoutjs扩展与使用

    原来考虑使用avalon2.0 经过一周的试验,能力不够,用不起来.最终使用了knockout-3.4.js <!DOCTYPE html> <html> <head&g ...

  10. 华清远见成为ARM大学计划正式合作伙伴

    来源:华清远见嵌入式学院 近日,华清远见教育集团成为ARM大学计划合作伙伴,这是ARM大学计划合作伙伴中的国内唯一教育机构.此次合作是ARM公司对华清远见教育集团的高度认可,也充分证明了华清远见这些年 ...