使用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. （原+转）VS2013：正在从以下位置加载符号

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5158020.html 这段时间启动调试时,vs2013加载时间很长很长...然后下面网址给出了解决方法 ...

  2. mysql截取字符串

    mysql 字符串截取1.从左开始截取字符串left(str,length)被截取字段,截取长度select left('admin1213',5) from table 2.从右开始截取字符串rig ...

  3. [ofbiz]设置任务计划(job)，提示service_item已经传递

    问题描述:设置任务计划(job),提示service_item已经传递 解决办法: 红色框内不要填写,就可以了."已经传递"是翻译的不准确,应该是"已过时",所 ...

  4. Oracle:ORA-01791: 不是 SELECTed 表达式

     项目中写hql语句 出现 ORA-01791: 不是 SELECTed 表达式问题. 语句如下: select distinct(name) where student order by numbe ...

  5. XML的特殊字符

    XML中共有5个特殊的字符,分别是:&<>“’.如果配置文件中的注入值包括这些特殊字符,就需要进行特别处理.有两种解决方法: 其一,采用本例中的<![CDATA[ ]]> ...

  6. 关于onclick中的event对象和element对象

    event.srcElement:引发事件的目标对象,常用于onclick事件. event.fromElement:引发事件的对象源,常用于onmouseout和onmouseover事件. eve ...

  7. 段和RSEG用法

    RSEG是段选择指令,要想明白它的意思就要了解段的意思. 段是程序代码或数据对象的存储单位.程序代码放到代码段,数据对象放到数据段.段分两种,一是绝对段,一是再定位段.绝对段在汇编语言中指定,在用L5 ...

  8. asm.uew

    /L16"ASM" Nocase Line Comment = ; File Extensions = ASM INC DEF /Colors = ,,,,, /Colors Ba ...

  9. T-SQL 语法元素

    一.标识符 在T-SQL语言中,对SQLServer数据库及其数据对象(比如表.索引.视图.存储过程.触发器等)需要以名称来进行命名并加以区分,这些名称就称为标识符. 通常情况下,SQLServer数 ...

  10. C# 将字节流转换为图片的实例方法

    usingSystem;  usingSystem.Collections.Generic;  usingSystem.Linq;  usingSystem.Text;  usingSystem.Dr ...