在学习 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. 数组.html

    <script > var arr1 = [1, 2, 3, 4, 5, 6 ]; 赋值 var arr2 =Array(1,2,3,4,5,6); var arr3 = new Arra ...

  2. sublime 打开import require 模块文件的url 或路径的插件

    结果一番周折,终于发现sublime提供的一个插件(open url)可以实现打开import file 路径的文件,比如import demo from “../path” 的文件在新窗口或者新标签 ...

  3. Splunk和ElasticSearch深度对比解析(转)

    转载自:http://www.sohu.com/a/154105465_354963 随着Splunk越来越被大家熟知和认可,现在市面上也不断涌各种同类产品,作为大数据搜索界的翘楚Splunk和Ela ...

  4. is和==的区别

    is 比较的是内存地址 == 比较的是内容 当两个变量指向同一个对象的时候. is是True, ==也是True

  5. 安全测试4_客户端的安全漏洞（XSS、CSRF、点击劫持、URL跳转）

    那个fanh前面学习的都是基础,现在开始正式学习下安全的知识,这一章主要讲解客户端常见的安全漏洞. 看到这个不错,给大家记一下: 1.常见的安全事件: 2.XSS(跨站脚本),英文全称:Cross S ...

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

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

  7. 大小端,memcpy和构造函数

    问题:memcpy一段内存到std::bitset里,bitset里的内存数据和被拷贝的内存数据对应不上 代码如下: #include <iostream> #include <bi ...

  8. 【python】python函数式编程、高阶函数

    1.map() : python内置的高阶函数,接收一个函数f和一个list,并通过把函数f依次作用在list的每个元素上,得到一个新的list并            返回. def f(x): r ...

  9. Nop常用知识点

    1.列表标题与内容均居中对齐,列中配置为: headerAttributes: { style: "text-align:center" }, attributes: { styl ...

  10. spring 之 lazy-init Autowired depends-on

    1 lazy-init lazy-init是延迟初始化的意思. spring中容器都是尽早的创建和配置所有的单例bean,因此当容器在启动时,就会去配置和创建单例bean.  默认情况下 beans ...