在书上看到用<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. 解决Ubuntu安装openssh-server依赖问题

    sudo apt-get install openssh-server 提示:openssh-server : 依赖: openssh-client (= 1:6.6p1-2ubuntu1) 解决 u ...

  2. Windows Commands and API

    Shortcuts ... Symbolic Links https://en.wikipedia.org/wiki/NTFS_symbolic_link Hard Links https://en. ...

  3. Linux mips64r2 PCI中断路由机制分析

    Linux mips64r2 PCI中断路由机制分析 本文主要分析mips64r2 PCI设备中断路由原理和irq号分配实现方法,并尝试回答如下问题: PCI设备驱动中断注册(request_irq) ...

  4. 将库打包到nuget服务器

     前言 由于目前.net core无法引用本地的 assembly ,所以尝试将项目的依赖库打包到nuget服务器.  相关的工具 Nuget Package Explorer 参考文档 dotnet ...

  5. 【生活没有希望】hdu1166敌兵布阵 线段树

    线段树水题刷刷,生活没有希望 最近看到代码跟树状数组差不多短的非递归线段树,常数也很小——zkw线段树 于是拿道水题练练手 短到让人身无可恋 ;pos;pos/=) a[pos]+=x;} ,ans= ...

  6. js实现简单的图片轮播

    js代码如下 <script type="text/javascript"> var n=1; var map=new Array(); map[0]=new Imag ...

  7. Notepad++ 默认快捷键

    Notepad++绝对是windows下进行程序编辑的神器之一,要更快速的使用以媲美VIM,必须灵活掌握它的快捷键,下面对notepad++默认的快捷键做个整理(其中有颜色的为常用招数):     1 ...

  8. jsp使用EL表达式回传boolean值出错的问题

    在最近做的一个项目中使用session回传的属性中有一个为boolean,报出错. 属性名字为"isAdmit",布尔类型.后来我上网查了一下,是因为我使用了Myeclipse的自 ...

  9. 阮一峰对js的见解（10大缺陷）

    一.为什么Javascript有设计缺陷?这里有三个客观原因,导致Javascript的设计不够完善.1. 设计阶段过于仓促Javascript的设计,其实只用了十天.而且,设计师是为了向公司交差,本 ...

  10. JavaScript-Object基础知识

    1.   定义:对象是JS的核心概念,也是最重要的数据类型.js的所有数据都可以被视为对象.                 对象是一种无序的数据集合,由若干个键值对(key:value)构成,由{ ...