在学习 html5中的 Canvas.drawImage时写了如下代码：

<!doctype html>

<html>

    <head><title>研究</title></head>

    <body>

        <canvas id="canvas" style="width:500px;height:400px; border:1px solid red"></canvas>

        <img id="img" src="ggg.jpg"  hidden />

    </body>

    <Script type="text/javascript">

        var cxt = document.getElementById("canvas").getContext("2d");

        var imgElement = document.getElementById("img");

       cxt.drawImage(imgElement, 10, 10, 200, 200);

    </Script>

</html>

在charome和firefox中都无法显示绘制的图片效果。后来查询了很多资料，才知道canvas在绘制图片的时候要等到img的图片完全加载到客户端后才可以绘制正确，现在的代码中直接是绘制图片，图片还没加载完就开始在绘制图片了，把代码稍微改下：

　　

<!doctype html>

<html>

    <head><title>研究</title></head>

    <body>

        <canvas id="canvas" style="width:500px;height:400px; border:1px solid red"></canvas>

        <img id="img" src="ggg.jpg"  hidden />

    </body>

    <Script type="text/javascript">

        var cxt = document.getElementById("canvas").getContext("2d");

        var imgElement = document.getElementById("img");

       setTimeout(function () { cxt.drawImage(imgElement, 10, 10, 200, 200); },0);

    </Script>

</html>

　　或者

<!doctype html>

<html>

    <head><title>研究</title></head>

    <body>

        <canvas id="canvas" style="width:500px;height:400px; border:1px solid red"></canvas>

        <img id="img" src="ggg.jpg"  hidden />

    </body>

    <Script type="text/javascript">

        var cxt = document.getElementById("canvas").getContext("2d");

        var imgElement = document.getElementById("img");

        imgElement.onload = function () { cxt.drawImage(imgElement, 10, 10, 200, 200); };

    </Script>

</html>

　　就可以正常显示绘制的图片了。

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

  1. Canvas 中drawImage 绘制不出图片

    在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...

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

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

  3. 在word中粘贴的图片为什么显示不完整

    一.背景 整理系统测试说明文档,截得图片粘贴到word中显示不完整. 二.错误问题 问题:在word中粘贴的图片为什么显示不完整,如图所示: 三.分析问题: 原因是原来设置的行间距是固定值,图片也作一 ...

  4. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  5. canvas - drawImage()方法绘制图片不显示的问题

    canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等.   问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...

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

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

  7. Android Canvas使用drawBitmap绘制图片

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

  8. canvas中插入的图片 自适应 ？

    注意 不是用canvas画图 是在canvas中插入图片 我很是惊讶  为啥明明img标签就能解决的非要用canvas 不过别人写好的 我一般不会动 需求是 canvas中的图片自适应不能拉伸…… 老 ...

  9. 使用canvas 的api 实现 图片的显示 及 压缩

    在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的时候,用file ...

随机推荐

  1. tomcat安全加固和规范

    tomcat是一个开源Web服务器,基于Tomcat的Web运行效率高,可以在一般的硬件平台上流畅运行,因此,颇受Web站长的青睐.不过,在默认配置下其存在一定的安全隐患,可被恶意攻击.以下是一些安全 ...

  2. Echarts动态加载柱状图和折线图混合展示的实例

    一.引入echarts文件: <script type="text/javascript" src="echarts.js"></script ...

  3. hive计算周一的日期

    ) FreeMarker --',-7)?date('yyyy-MM-dd'),'week')?string('yyyy-MM-dd')}'

  4. es6基础(1)--声明

    function test(){ //let只在块作用域有效 for(let i=1;i<3;i++){ console.log(i); } //es6严格模式,变量未声明,不可以用 //con ...

  5. day6需要记忆（元组字典集合）

    一:基本使用:(元组 tuple)优先掌握的操作1.按索引取值(正向取+反向取):只能取2.切片(顾头不顾尾,步长)3.长度  len()4.成员运算in和not in5.循环需要掌握的操作1.cou ...

  6. Nginx配置跨域请求“Access-Control-Allow-Origin”

    当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服 ...

  7. Maven依赖下载速度慢，不用怕，这么搞快了飞起

    一.背景 众所周知,Maven对于依赖的管理让我们程序员感觉爽的不要不要的,但是由于这货是国外出的,所以在我们从中央仓库下载依赖的时候,速度如蜗牛一般,让人不能忍,并且这也是大多数程序员都会遇到的问题 ...

  8. 微信小程序连接本地接口（转）

    原文地址 最近的一个项目就是微信小程序 第一次接触微信开发者工具,并进行小程序的后端开发, 于是想看一下小程序如何请求本地的后台服务接口 wx.request({ url: 'http://local ...

  9. 42.scrapy爬取数据入库mongodb

    scrapy爬虫采集数据存入mongodb采集效果如图: 1.首先开启服务切换到mongodb的bin目录下 命令:mongod --dbpath e:\data\db 另开黑窗口 命令:mongo. ...

  10. Maven上传jar包到私服

    1.认证,在M2_HOME/conf/settings.xml配置用户名密码 <server> <id>releases</id> <username> ...