使用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. 初学linux命令

    linux系统的精髓在于它的命令行 早就听说要学习linux系统,就要学习它的命令行(Command Line Interface).说来惭愧,已经使用了linuxmint快两个月了,虽然能够使用一些 ...

  2. Java中的各种ｏ

    java的po vo dao dto pojo 1各个术语的简介 PO(persistant object)持久对象 最形象的理解就是一个PO就是数据库中的一条记录.PO是在ORM中出现的概念,就是O ...

  3. HTML5学习笔记一：新增主体结构元素

    Dreamweaver快捷键: 属性面板:Ctrl+F3 新建文档:Ctrl+N 选择用网页查看:F12 新增的主体结构元素: section元素(例子如下): <!DOCTYPE HTML&g ...

  4. JSTL: empty 可以减少很多繁冗的判空(转)

    ${empty student.name }Empty是判空为空返回的真不为空返回的是假 ${(empty student.name)? '空' : '非空'} <c:if test=" ...

  5. C#设置标记方法等为否决的不可用

       C#如何标记类里面的方法或者类为否决的,不可使用.在VS IDE编辑器中使用此方法或者类时会用绿色的波浪线标记这个语句,当移动鼠标到这句代码上时,会出现[否决的]方法名,警告“方法名称”已过时: ...

  6. 在Qt中怎样显示ASCII码大于127的字符

    前段时间要显示“≤”符号找了挺久没找到方法,后面发现用以下方法可以解决: ushort gd[]={8805,0};    QString gteq=QString::fromUtf16(gd); 得 ...

  7. SQLSERVER读懂语句运行的统计信息

    SQLSERVER读懂语句运行的统计信息 对于语句的运行,除了执行计划本身,还有一些其他因素要考虑,例如语句的编译时间.执行时间.做了多少次磁盘读等. 如果DBA能够把问题语句单独测试运行,可以在运行 ...

  8. C# 文件/文件夹压缩

    一.ZipFile ZipFile类用于选择文件或文件夹进行压缩生成压缩包. 常用属性: 属性 说明 Count 文件数目(注意是在ComitUpdat之后才有) Password 压缩包密码 Siz ...

  9. 【Xamarin挖墙脚系列：打造独特的Xamarin.IOS开发环境】

    苹果的产品,依赖特定的开发环境. Mac  +  Xcode  不可缺少.所以,必须有Mac系统. 1-虚拟机搭建 2-土豪有Mac电脑设备 但是我觉得还是顺带上Visual Studio才是完美.. ...

  10. excel内容转成xml

    简单记录下如何将excel中的一个表格内容转成xml格式的文件. excel菜单栏中的"开发工具"下有专门处理xml的模块,如下图. 如果你的excel中看不到"开发工具 ...