在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制。

//html
<img src="1.png" />
<canvas id="draw"></canvas> //js
var Image = document.images[0]; var draw = document.getElementById('draw');
var context = draw.getContext('2d); Image.onload=function(){
context.drawImage(Image,10,10);
};

Canvas 中drawImage 绘制不出图片的更多相关文章

  1. Canvas中 drawImage绘制图片不显示

    在学习 html5中的 Canvas.drawImage时写了如下代码: <!doctype html> <html> <head><title>研究& ...

  2. 软件项目技术点(8)—— canvas调用drawImage绘制图片

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本 ...

  3. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

  4. (转载) Chrome中canvas上drawImage无法画出image的解决办法

    在自己写demo的过程中 碰到了这样一个问题 发现drawImage方法没有达到预期的效果 图片没办法显示 而fillRect等画图形的方法却工作良好 大概的代码如下: $(function() { ...

  5. 在C#中使用正则表达式筛选出图片URL并下载图片URL中的图片到本地

    本功能主要用到的知识点如下: 1.正则表达式 2.C#中下载文件功能的实现 3.泛型集合的使用 4.进程的简单操作(用于结束当前程序) 下面就简单说一下是如何使用这些知识点的.先详细说下这个程序主要实 ...

  6. canvas的drawImage函数

    HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) .drawImage函数有三种函数原型: drawImage( ...

  7. 循环匹配出图片地址(即src属性)

    <script type="text/javascript"> //思路分两步:作者(yanue). //1,匹配出图片img标签(即匹配出所有图片),过滤其他不需要的 ...

  8. 浅谈HTML5中canvas中的beginPath()和closePath()的重要性

    beginPath的作用很简单,就是开始一段新的路径,但在使用canvas绘图的过程中却非常重要 先来看一小段代码: var ctx=document.getElementById("can ...

  9. 图片在 canvas 中的 选中/平移/缩放/旋转,包含了所有canvas的2D变化,让你认识到数学的重要性

    1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...

随机推荐

  1. Nginx 基本 安装..

    ubuntu 下 Nginx是高度自由化的Web服务器,它的功能是由许多模块来支持.如果使用了某个模块,这个模块使用了一些类似zlib或OpenSSL等的第三方库,那么就必须先安装这些软件.Ubunt ...

  2. 权限知识中的AIX ACL

    Aix ACL是对标准权限位的扩展.通过修改分配给个人或组的标准权限,对每个文件或目录进行更精细的控制. 对每个组或用户,有3种权限分配情况: PERMIT : 准许对文件或目录的特定权限. DEMY ...

  3. jinkens + svn 把代码更新到本地在运行。(方法比较笨,只是想实现自己的想法。把代码更新下来在运行。)

    jinkens + svn 把代码更新到本地在运行.

  4. tomcat 虚拟目录配置appBase和docBase的区别

    先看server.xml文件host配置   <Host name="localhost" appBase="webapps"      可以修改成自己想 ...

  5. disruptor 问题排查

    需求:收到银行异步通知,要在2秒内将结果返回银行,同时还要根据银行返回的交易状态更新数据库订单状态和其他业务. 采用disruptor,其实最好使用独立MQ产品.本次用的是disruptor,遇到了一 ...

  6. Python报错:UnicodeEncodeError 'gbk' codec can't encode character

    今天在使用Python文件处理写网络上爬取的文件的时候,遇到了错误:UnicodeEncodeError: ‘gbk’ codec can’t encode character ‘\xa0’ in p ...

  7. python中字典排序,列表中的字典排序

    python中字典排序,列表中的字典排序 一.使用python模块:operator import operator #首先要导入模块operator x = {1:2, 3:4, 4:3, 2:1, ...

  8. js模仿微信语音播放的小功能

    自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,,  代码如下: <!DOCTYPE html> <html lang="en&qu ...

  9. SQL SERVER LEFT JOIN, INNER JOIN, RIGHT JOIN

    JOIN: 如果表中有至少一个匹配,则返回行 LEFT JOIN: 即使右表中没有匹配,也从左表返回所有的行 RIGHT JOIN: 即使左表中没有匹配,也从右表返回所有的行 FULL JOIN: 只 ...

  10. 在本地安装oracle-maven库

    mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc14 -Dversion=10.2.0.4.0 -Dpackaging= ...