HTML5 drawImage 使用问题

最新推荐文章于 2021-07-25 16:21:48 发布

baigang5630

最新推荐文章于 2021-07-25 16:21:48 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/IcemanZB/p/4125658.html

版权

使用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>

转载于:https://www.cnblogs.com/IcemanZB/p/4125658.html

baigang5630

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 drawImage 使用问题

使用Image遇到的问题：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.9.1.min.js...
复制链接

扫一扫