在学习 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. 微信小程序学习笔记1--小程序的代码构成

    最近打算学习一下微信小程序,看了微信公众平台的文档感觉还比较简单,就从这个方向重新找回学习的状态吧: 1.先了解一下小程序的代码构成: 创建项目后会看到四种后缀的文件: .json 后缀的 JSON ...

  2. Tomcat+Nginx+Redis+MySQL实现反向代理、负载均衡、session共享

    一.环境准备 时间同步 关闭防火墙 联通网络,配置yum源 软件包链接:https://pan.baidu.com/s/1qYbtpnQ 二.安装nginx 1.解决依赖关系 [root@nginx- ...

  3. hdfs底层存储分隔符

    字段分割 \ map字段里面key \ value \ 每行结尾用linux换行符 \0a '\r'是回车,'\n'是换行,前者使光标到行首,后者使光标下移一格,通常敲一个回车键,即是回车,又是换行( ...

  4. 转载：centos安装redis

    转载自:https://www.cnblogs.com/renzhicai/p/7773080.html CentOS下Redis的安装 [TOC] 前言 安装Redis需要知道自己需要哪个版本,有针 ...

  5. Ubuntu下安装virtualbox: RTR3InitEx failed with rc=-1912 (rc=-1912)

    下载好合适的安装包: http://www.oracle.com/technetwork/server-storage/virtualbox/downloads/index.html 然后进行安装,配 ...

  6. 把自己的代码发布到npm（npm publish）

    写了代码如何发布到npm包? 示例 demo1 demo2 1.注册npm账号 在npm官网注册https://www.npmjs.com/注意邮箱要验证,会发送验证链接到你的注册邮箱,没有验证的话是 ...

  7. 零基础学习python_列表和元组（10-13课）

    一时兴起今天又回过头来补一下列表和元组,先来说说列表哈,列表其实是python最经常用到的数据类型了,不仅经常用还很强大呢,这个跟C语言里面的数组是类似的,列表当然也可以增删改查,不过我可没打算用之前 ...

  8. 点击复制内容到剪切板（clipboard）

    clipboard官方文档:https://clipboardjs.com/ 安装: 1.用npm:npm install clipboard --save 2.下载:https://github.c ...

  9. js 数组的crud操作

    增加push(); 向数组尾添加元素unshift(); 向数组头添加元素向数组指定下标添加元素:可以用Array提供的splice(); var arr = ['a','b','c']; arr.s ...

  10. pom格式

    参考: https://www.jianshu.com/p/0e3a1f9c9ce7 https://blog.csdn.net/u012152619/article/details/51485297 ...