使用Image遇到的问题：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function() {

                var jsCanv = document.getElementById("canv");

                var oCanv = jsCanv.getContext("2d");

                var img = new Image();

                img.src = "img.png";

                oCanv.drawImage(img, 220, 30); 

            })

        </script>

    </head>

    <body>

        <canvas id="canv" width="500" height="500">

            浏览器不支持

        </canvas>

    </body>

</html>

其实这种写法是有错误的，实际上只要一刷新图片就不显示出来。要想保证刷新正常显示需要在Image onload的时候重绘一次才行。测试在chrome 19下会出现的问题。

解决方案

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function() {

                var jsCanv = document.getElementById("canv");

                var oCanv = jsCanv.getContext("2d");

                var img = new Image();

                img.src = "img.png";

                img.onload = function() {

                    oCanv.drawImage(img, 220, 30);

                }

            })

        </script>

    </head>

    <body>

        <canvas id="canv" width="500" height="500">

            浏览器不支持

        </canvas>

    </body>

</html>

HTML5 drawImage 使用问题的更多相关文章

  1. HTML5 drawImage性能问题

    最近做游戏发现,为了节省HTTP请求,把很多组动画放到了一张图片上,也就是传说中的雪碧图,但是用drawImage从图片上截取一部分绘制在canvas上时会非常慢. 我的图片尺寸为5000*7000 ...

  2. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  3. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  4. HTML5 Canvas绘图详解 drawImage() 方法 有图有真相！

    步骤 1 2 3 4 5   简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...

  5. html5 绘制图片 drawImage

    要在绘图上下文中绘制图片,可以使用 drawImage 方法.该方法有三种不同的参数: drawImage(image,dx,dy) drawImage(image,dx,dy,dw,dh) d ...

  6. HTML5 通过文件输入框读取文件为base64文件, 并借助canvas压缩 FileReader, files, drawImage

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  9. 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频

    目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...

随机推荐

  1. OFBiz应用https与http方式访问切换

    url.properties port.https.enabled=N port.https=8444 force.https.host=

  2. EditText判断用户输入完成，然后进行操作解决方案

    private Timer timer = new Timer(); private final long DELAY = 1000; // in ms EditText editTextStop = ...

  3. Linux中的ln

    在安装了wdcp或在正常使用wdcp后,如有意无意用使用了yum更新系统或安装软件,有时会直接更新安装了yum源里的apache,这时问题就来了打开所有的网站或页面,都是提示Apache欢迎页面 这个 ...

  4. tp中u方法的使用

    自学的时候都没怎么使用过该方法,现在刚进入一个新公司参加项目.发现这个方法用的很多,所以记录下来防止以后忘了. U方法用于完成对URL地址的组装,特点在于可以自动根据当前的URL模式和设置生成对应的U ...

  5. iptables中规则的关系——以只允许某些IP段访问为例

    最近遇到一个问题:服务器被全球的IP频繁试图通过ssh登录. 于是想到通过iptables防火墙限制访问,达到:仅允许指定ip段访问ssh服务(22端口). 关于iptables添加规则的文章有很多, ...

  6. js的eval方法

    eval方法: 检查JScript代码,并且执行. 语法: eval(codeString); 参数: codeString是必选项,参数是包含有效的JScript代码的字符串值,这个字符串值将由JS ...

  7. 大端模式&小端模式、主机序&网络序、入栈地址高低问题

    一.大端模式&小端模式 所谓的“大端模式”,是指数据的低位(就是权值较小的后面那几位)保存在内存的高地址中,而数据的高位,保存在内存的低地址中,这样的存储模式有点儿类似于把数据当作字符串顺序处 ...

  8. BZOJ 1086 王室联邦

    http://www.lydsy.com/JudgeOnline/problem.php?id=1086 思路:贪心,每次当储存的儿子大于等于B时,分出一个块,这样每次每个块至多为2B,这样剩下的没有 ...

  9. Keil中如何消除UNCALLED SEGMENT，IGNORED FOR OVERLAY PROCESS警告

    在Keil C中,如果没有显式调用到定义过的函数,就会出现这样的的警告.当出现这样的警告时,可以不用管,因为不影响其它部分.但是,我们知道,即使没有调用这个函数,Keil仍然把它编译连接进整个程序,不 ...

  10. Linux和windows动态库

    转载:http://www.cnblogs.com/chio/archive/2008/11/13/1333119.html 态链接库技术实现和设计程序常用的技术,在Windows和Linux系 统中 ...