在书上看到用<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. [leetcode] 题型整理之cycle

    找到环的起点. 一快一慢相遇初,从头再走再相逢.

  2. z-stack组网过程

    z-stack组网分:协调器建立网络.路由器和终端加入网络 暂时只记录第一次上电建立网络的过程,至于开启NV_RESTORE后,恢复原有的网络则暂时不分析. 一.协调器建立网络: 1.ZDO层的ZDA ...

  3. 正定矩阵（positive definite matrix）

    设M是n阶方阵,如果对任何非零向量z,都有zTMz> 0,其中zT 表示z的转置,就称M正定矩阵. 正定矩阵在合同变换下可化为标准型, 即对角矩阵. 所有特征值大于零的对称矩阵也是正定矩阵.   ...

  4. java中被各种XXUtil/XXUtils辅助类恶心到了，推荐这种命名方法

    且看一下有多少个StringUtils 列举一下XXUtil/XXUtils恶劣之处 1. 不知道该用XXUtil还是用XXUtils, 或者XXHelper, XXTool 2. 不知道该用a.ja ...

  5. SEO优化---学会建立高转化率的网站关键词库

    想要优化好一个网站,行业的分析,以及关键词的挖掘是必要的,有一定的关键词排名了,但是转化率和流量方面却很不理想这种情况大部分是只注重了有指数的关键词排名,而忽略了长尾关键词和一些没有指数但是可以带来巨 ...

  6. OSG消息机制之消息分析

    OSG消息接收在头文件有各种事件的相关参数

  7. [转]svn 回退/更新/取消至某个版本命令详解

    1. 取消Add/Delete 取消文件 svn revert 文件名 取消目录 svn revert --depth=infinity 目录名 2. 回退版本 方法1: 用svn merge 1) ...

  8. 数组排序（java）

    代码如下: public class paixu{ public static void main(String []args){ int a[] = {78,23,56,34,12,45,67,89 ...

  9. windows系统时间(SYSTEMTIME)

    GetSystemTime函数获得当前的UTC时间,GetLocalTime获得当前的本地时间 UTC是协调世界时(Universal Time Coordinated)英文缩写,是由国际无线电咨询委 ...

  10. JAVA集合类型详解

    一.前言 作为java面试的常客[集合类型]是永恒的话题:在开发中,主要了解具体的使用,没有太多的去关注具体的理论说明,掌握那几种常用的集合类型貌似也就够使用了:导致这一些集合类型的理论有可能经常的忘 ...