在使用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. js 的 一些操作。。。

    // 对错误图片进行处理 $("img").error(function() { $(this).attr("src", "http://127.0. ...

  2. put get & push pull

    总要有一个容器,一个生产方,一个消费方

  3. node服务器端模块化-commomjs

    modele.js getmodule.js 用exports 返回的是一个对象中的每个属性

  4. firewall 端口转发

    centos 7 使用背景:某次新购阿里云服务器安装nginx后配置80转8080的内部转发 systemctl status firewalld ---查看守护进程状态systemctl start ...

  5. 如何将一个Maven项目转化成一个Eclipse项目

    有时候我们需要将一个Maven项目导入到Eclipse中,直接作为一个普通的eclipse项目来导入是不行的,我们可以通过一个命令来实现:mvn eclipse:eclipse 1. 进入该Maven ...

  6. spring中注解注入 context:component-scan 的使用说明

    通常情况下我们在创建spring项目的时候在xml配置文件中都会配置这个标签,配置完这个标签后,spring就会去自动扫描base-package对应的路径或者该路径的子包下面的java文件,如果扫描 ...

  7. 使用mongoosejs链接Mongodb

    以前只是了解Nodejs 这回打算好好学学.学到熟练使用的程度 var options={ user:'test_user', pass:'123456' }; mongoose.connect('m ...

  8. 硬盘和显卡的访问与控制(一)——《x86汇编语言:从实模式到保护模式》读书笔记01

    本文是<x86汇编语言:从实模式到保护模式>(电子工业出版社)的读书实验笔记. 这篇文章我们先不分析代码,而是说一下在Bochs环境下如何看到实验结果. 需要的源码文件 第一个文件是加载程 ...

  9. .vimrc的配置

    set nocompatible set encoding=utf-8 set fileencodings=utf-8,chinese set tabstop=4 set cindent shiftw ...

  10. 新建mavent项目报错

    1.找到自己项目 项目名\.settings\org.eclipse.wst.common.project.facet.core.xml 将<installed facet="jst. ...