var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,200,200);

学习canvas时,发现当在Chrome和Opera中运行上面代码是,画布中并不能显示出相应的图片,后来通过查询才明白,图片加载是异步加载,当调用draw Image()时,图片信息还没加载完,所以无法显示,很简单的解决方法就是把

ctx.drawImage(img,10,10,200,200);
这段代码放进window.onload中;

关于Chrome和Opera中draw Image()方法无法在canvas画布中绘制图片的问题的更多相关文章

  1. [原]unity中WWW isDone方法只能在主线程中调用

    项目中要使用动态加载,原计划是生成WWW对象后,放到一个容器里.由一个独立线程轮询容器里的对象,如果www.isDone为true时,回调一个接口把结果交给请求方. new Thread( new T ...

  2. android中Canvas使用drawBitmap绘制图片

    1.主要的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置     drawBitmap(Bitmap bitmap, float left, float ...

  3. H5 Canvas | 画布中变量作用域与setInterval方法同步执行探究

    Demo - 随机绘制圆环 实现思路: 将一个圆环的绘制分成100份,setInterval()方法定义每隔时间n绘制一段新的,每份的开始路径都是上一次的结束路径,实现步进绘制. 通过Math.ran ...

  4. 利用pandas库中的read_html方法快速抓取网页中常见的表格型数据

    本文转载自:https://www.makcyun.top/web_scraping_withpython2.html 需要学习的地方: (1)read_html的用法 作用:快速获取在html中页面 ...

  5. Java小题,通过JNI调用本地C++共享库中的对应方法实现杨辉三角的绘制

    1.在Eclipse中配置Javah,配置如下 位置是你javah.exe在你电脑磁盘上的路径 位置:C:\Program Files\Java\jdk1.8.0_112\bin\javah.exe ...

  6. canvas toDataURL() 方法如何生成部分画布内容的图片

    HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI .可以使用 type参数其类型,默认为 PNG 格式.图片的分辨率为96dpi. 如果画布的高 ...

  7. 小程序中曾经遇到的坑(1)----canvas画布

    目前正在开发小程序,在开发过程中,总会遇到一些坑,而这些坑并不会有很多开发者遇到而说出来.这里先记录一条我开发过程中遇到的问题,以便后人在开发中能够更容易的解决问题!!! 首先,小程序在canvas画 ...

  8. junit4 assert类中的assert方法总结

    junit中的assert方法全部放在Assert类中,总结一下junit类中assert方法的分类. 1.assertTrue/False([String message,]boolean cond ...

  9. junit中的assert方法总结

    junit中的assert方法全部放在Assert类中,总结一下junit类中assert方法的分类.1.assertTrue/False([String message,]boolean condi ...

随机推荐

  1. python字典无序?有序?

    默认情况下Python的字典输出顺序是按照键的创建顺序. 字典的无序是指,不能人为重新排序.比如说你按键值1,2,3,4的顺序创建的字典,只能由解析器按创建顺序,还是1,2,3,4的输出.你无法控制它 ...

  2. Memory Notification: Library Cache Object loaded into SGA

    问题现象: 数据库服务器可以ping通,但SSH连接不了:应用.plsqldeveloper 也都连接不了.事情到了这个地步,只能重启服务器. 服务器环境:oracle10.2.0.1 +rhel5. ...

  3. 极光API推送 (v3 版本)

    Push API v3 这是 Push API 最近的版本. 相比于 API v2 版本,v3 版本的改进为: 完全基于 https,不再提供 http 访问: 使用 HTTP Basic Authe ...

  4. 使用grunt中遇到的问题

    1.使用jshint进行代码检查时,grunt命令后报错: 因为出现了乱码,我猜测是因为编码原因导致的.遂在webstorm的setting中修改了编码为utf-8,问题解决.

  5. c++之cin/cin.get/cin.getline()详解

    C++输入过程中,是把输入加载到缓冲区中,然后对缓冲区中的字符进行读取.cin,cin,get(),cin.getline()三个函数虽然都能进行数据读取,但是它们对缓冲区内数据的处理方法是不同的(如 ...

  6. NOI 2012 魔幻棋盘 | 二维差分 + 二维线段树

    题目:luogu 2086 二维线段树,按套路差分原矩阵,gcd( x1, x2, ……, xn ) = gcd( xi , x2 - x1 , ……, xn - xn-1 ),必须要有一个原数 xi ...

  7. zookeeper分布式安装

    1.先把zookeeper-3.5.2-alpha.tar上传解压到/usr/local/下重命名为zookeeper ############# zookeeper env ############ ...

  8. AngularJS系统学习之Scope(作用域)

    本文出自:https://www.w3ctech.com/topic/1611 看完了没怎么懂,  也许是和别人 原文作者: Nicolas Bhttps://www.w3ctech.com/topi ...

  9. elmo驱动器使用EAS II配置教程

    一.驱动器接线 1.1驱动器接口: 驱动器接线,需要连接两个接口,一个是反馈接口,一个是STO接口. 反馈接口,我这里使用了elmo驱动器的Port A.这个接口提供5v电源.并且可以输入旋转编码器和 ...

  10. Win10资源管理器中的库文件夹按照修改日期排序

    win7之后添加的库十分的好用,可以将下载,音乐,文档设置在我的电脑(win10叫此电脑)首页,快速进入. 我对文件夹设置了按照时间排序,这样进去就可以直接看到最近下载了什么文件.但是win10用时间 ...