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>
  • 相关阅读:
    SQLDirect 6.5 Source (Delphi 5-10.1 Berlin)
    中国自主X86处理器工艺跃进:国产28nm升级16nm(上海兆芯)
    底层库
    An Overview of Complex Event Processing2
    linux动态库编译和使用
    gulp
    Web前端性能优化
    ECLIPSE JSP TOMCAT 环境搭建
    项目架构mvc+webapi
    HTTP/1.1
  • 原文地址:https://www.cnblogs.com/IcemanZB/p/4125658.html
Copyright © 2011-2022 走看看