HTML5中drawImage如何使用

HTML5中drawImage如何使用，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都网站建设、外贸网站建设、曲阜网络推广、成都微信小程序、曲阜网络营销、曲阜企业策划、曲阜品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供曲阜建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

<!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></p>
<p>    <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如何使用
转载源于：https://www.cdcxhl.com/article8/piphip.html

成都网站建设公司_创新互联，为您提供标签优化、品牌网站建设、虚拟主机、小程序开发、网站设计、网站排名

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容