zoukankan      html  css  js  c++  java
  • HTML5 drawImage 使用问题

    使用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>
  • 相关阅读:
    K-Means++ 聚类之数据可视化:使用gnuplot
    QQ设计第1-5步
    QQ设计第1-5步
    为什么有很深的windows基础还是不能动摇linux半步
    常用命令
    在线会计_金蝶友商网
    XP使用VNC远程桌面CentOS 6
    Fatal error: Call to undefined function mb_substr()
    如何汉化 po 文件及编译成 mo 文件
    idoerp
  • 原文地址:https://www.cnblogs.com/IcemanZB/p/4125658.html
Copyright © 2011-2022 走看看