在学习 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. Spark2.X分布式弹性数据集

    跑一下这个结果 参考代码 package com.spark.test import org.apache.spark.sql.SparkSession import org.apache.spark ...

  2. 在javascript中toString 和valueOf的区别

    1.toString()方法:主要用于Array.Boolean.Date.Error.Function.Number等对象转化为字符串形式.日期类的toString()方法返回一个可读的日期和字符串 ...

  3. 更换Git的地址；

    Git地址变了,Android Studio更新和提交代码都用不了了:需要把新的Git地址更换一下: 1.打开git项目的文件夹,进入git操作框: 2. git remote -v 查看现有地址: ...

  4. Android WebView无法播放视频或直播，关闭界面后任在播放的问题；

    1.设置webview属性: webView.setWebChromeClient(new MyWebChromeClient());         webSettings = webView.ge ...

  5. MySQL表中的数据类型

    数据类型:在表中数据类型主要是限制字段必须以什么样的数据类型传值. 一 整型 整数类型:TINYINT SMALLINT MEDIUMINT INT BIGINT总共有五种,name我们一般用到的也就 ...

  6. Java8之分组

    数据库中根据多个条件进行分组 ) from tableA group by a, b 现在不使用sql,而直接使用java编写分组,则通过Java8根据多个条件进行分组代码如下: List<Us ...

  7. centos7 jdk

    查看已经自带的jdk: rpm -qa | grep jdk 卸载 sudo yum remove XXX   1.下载 jdk-8u101-linux-x64.rpm http://www.orac ...

  8. python学习之----爬取图片

    import os from urllib.request import urlretrieve from urllib.request import urlopen from bs4 import ...

  9. failed to open stream: Permission denied in警告错误

    问题是文件所在目录的权限问题导致的.只需要将警告文件所在的目录权限更改为777(至少是006)即可 例如 (...a.log)failed to open stream: Permission den ...

  10. python调用c的方法

    虽然python是万能的,但是对于某些特殊功能,需要c语言才能完成.这样,就需要用python来调用c的代码了 具体流程: c编写相关函数 ,编译成库 然后在python中加载这些库,指定调用函数. ...