HTML5中drawImage如何使用

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

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

    
        
        
        
        
            $(function() {
                var jsCanv = document.getElementById("canv");
                var oCanv = jsCanv.getContext("2d");
                var img = new Image();
                img.src = "img.png";
                oCanv.drawImage(img, 220, 30); 
            })
        
    

    
        
            浏览器不支持
        
    

其实这种写法是有错误的，实际上只要一刷新图片就不显示出来。要想保证刷新正常显示需要在Image onload的时候重绘一次才行。测试在chrome 19下会出现的问题。

解决方案

代码如下:

    
        
        
        
        
            $(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); 
                }
            })
        
    
    
        
            浏览器不支持
        
    

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。