在学习 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. C# 中使用锁防止多线程冲突

    在编程的时候经常会用到多线程,有时候如果多线程操作同一个资源就会导致冲突,.NET提供了多种方法来防止冲突发生,这里讲下Mutex 该类位于System.Threading命名空间,常用的方式是这样: ...

  2. vs code编辑器使用教程指南

    1.安装插件: 这里可以搜索到插件并安装. 2.修改快捷键或查找快捷键: 这里可以进行快捷键的查找和修改 3.进入引用文件: 点击f12,或者右击快捷键可以看到进入引用文件的快捷方法. 4.查看目录:

  3. c helloworld

    #include <stdio.h> int main() { int i; printf("%s","hello, world"); } 1.#i ...

  4. 基于拖放布局的 Twitter Bootstrap 网站生成器

    简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站?是的,LayoutIt 是一个 Twitter Bootstrap 界面生成器,能够帮助你快速制作出网站和界面模型,同时能够 ...

  5. Android悬浮框，在Service中打开悬浮窗；在Service中打开Dialog；

    文章介绍了如何在Service中显示悬浮框,在Service中弹出Dialog,在Service中做耗时的轮询操作: 背景需求: 公司的项目现在的逻辑是这样的:发送一个指令,然后3秒一次轮询去查询这个 ...

  6. vue从入门到女装？？：从零开始搭建后台管理系统（二）用vue-docute生成线上文档

    教程 vue从入门到女装??:从零开始搭建后台管理系统(一)安装框架 一个系统开发完成了总要有操作说明手册,接口文档之类的东西吧?这种要全部纯手写就很麻烦了,可以借助一些插件,比如: vue-docu ...

  7. android 开发 实现一个带图片Image的ListView

    注意:这种实现方法不是实现ListView的最优方法,只是希望通过练习了解ListView的实现原理 思维路线: 1.创建drawable文件夹将要使用的图片导入进去 2.写一个类,用于存放图片ID数 ...

  8. Java可视操作界面例子

    package rom; import java.lang.*; import java.awt.*; import java.awt.event.ActionEvent; import java.a ...

  9. Java多线程例子

    package rom; import java.awt.image.AreaAveragingScaleFilter; public class Xamle_2 { private static T ...

  10. oracle的schema的含义

    转自:http://www.cnblogs.com/sfmjp/articles/2932748.html 在现在做的Kraft Catalyst 项目中,Cransoft其中有一个功能就是schem ...