使用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. [c language] getopt

    getopt(分析命令行参数)     相关函数表头文件         #include<unistd.h>定义函数         int getopt(int argc,char * ...

  2. 解决onethink导出word后出现名字乱码的情况

    这个问题让我纠结了好久最后终于在网上看到一篇文章讲解的还不错 http://www.oschina.net/question/142207_39393

  3. ASP.NET MVC 4.0 学习5-ActionResult

    一,Controller簡介 Controller擔任了資料傳遞的角色,負責流程控制,決定存取哪個Model以及決定顯示哪個View頁面,即ASP.NET MVC中有關於『傳遞』的任務皆由Contro ...

  4. mysql-test库要命的地方

    为了见识test库对整个mysql实例安全的影响,我将建立一个appuser@'%' 用户,它只有一个权限那就是可以连接上mysql. 001. 以高权限用户登录mysql.创建一个appuser@' ...

  5. Oracle select 中case 的使用以及使用decode替换case

    表结构如下: 将money<50的显示为贫农,money<80的显示为中农,其他的显示为富农,sql 语句如下 select name, case then '贫农' then '中农' ...

  6. Eclipse调试Bug的七种常用技巧（转）

        注意事项及小结: (1)Line Breakpoint:如果设置Conditional,监控的变量需要比当前行高一级block,譬如for(int i=0;i<20;i++)中的i,fo ...

  7. mac安装GNU命令行工具

    mac安装GNU命令行工具 2.添加的repo     tap home/dupes        brew install coreutils  binutils  diffutils  ed -- ...

  8. VC使用#定义方便控制版本号的宏

    一个 VC Project 中,可能有很多地方需要用到版本号,比如 About 对话框.版本资源等.如果每次版本更改都一一去改变这些值,不但非常麻烦,而且有悖唯一原则. 巧妙地使用宏定义,可以很好地解 ...

  9. 学DSP(二):目标芯片28335,GO!

    28335开发板有了,之前没有用过TI的片子,还是先看看这个东西是啥东西. 进入28335的中文网页: http://www.ti.com.cn/product/cn/tms320f28335    ...

  10. cc150 Chapter 2 | Linked Lists 2.6 Given a circular linked list, implement an algorithm which returns node at the beginning of the loop.

    2.6Given a circular linked list,  implement an algorithm which returns the node at the beginning of ...