在书上看到用<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. 【LFS】简易LFS搭建指南

    http://blog.csdn.net/u012333520/article/details/50533002#comments ////////////////////////////////// ...

  2. 公共资源情报（OSINT）工具Automater

    公共资源情报(OSINT)工具Automater   公共资源情报(OSINT)就是从公共信息中提取有用情报.它是美国中央情报局(CIA)的一种情报搜集手段,各国都在广泛利用这种方式.Kali Lin ...

  3. Delphi之静态方法,虚方法virtual,动态dynamic,抽象abstract,消息

    Delphi之静态方法,虚方法virtual,动态dynamic,抽象abstract,消息 http://www.cnblogs.com/zhwx/archive/2012/08/28/266055 ...

  4. 用Fiddler的自动响应模拟系统集成

    1. 下载最新版本的Fiddler Fiddler 官网 2, 安装并启动Fiddler 3, 勾选自动响应 见上图 4, 添加自动响应规则 见上图 5, 添加自动响应内容文件 添加响应文件到Fidd ...

  5. C++文件操作(fstream)

    C++ 通过以下几个类支持文件的输入输出: ofstream: 写操作(输出)的文件类 (由ostream引申而来) ifstream: 读操作(输入)的文件类(由istream引申而来) fstre ...

  6. js中push(),pop(),unshift(),shift()的用法小结

    1.push().pop()和unshift().shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及内容. 不同的是 push().pop() 是从数组的尾部进行增减,unshift ...

  7. mac下配置xampp多端口

    首先下载并安装完XAMPP软件. 第一步: 打开XAMPP安装目录,找到配置文件. 如:/Applications/XAMPP/etc/httpd.conf 打开后查找 Listen 80 会看到以下 ...

  8. C#获取存储过程返回值和输出参数值的方法

    //转自网络,先留个底 1.获取Return返回值 //存储过程 //Create PROCEDURE MYSQL // @a int, // @b int //AS // return @a + @ ...

  9. swift-string(字符串的一些语法)

    1 isEmpty 返回一个布尔值,确定该字符串是否为空 2 hasPrefix(prefix: String) 函数检查给定的参数字符串是否以 string 为前缀 3 hasSuffix(suff ...

  10. js学习笔记 （继续）

    转义字符不断行的空白格 nbsp:1 2半方大的空白 ensp 1 2全方大的空白 emsp 1 2小于号 < <大于号 > >双引号 " "AND符号 & ...