HTML5中drawImage如何使用

HTML5中drawImage如何使用，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網綜合服務，包含不限于成都網站設計、成都網站建設、外貿網站建設、曲阜網絡推廣、成都微信小程序、曲阜網絡營銷、曲阜企業(yè)策劃、曲阜品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供曲阜建站搭建服務，24小時服務熱線：028-86922220，官方網址：m.kartarina.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>

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

網頁標題：HTML5中drawImage如何使用
轉載源于：http://m.kartarina.com/article8/piphip.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、品牌網站建設、虛擬主機、小程序開發(fā)、網站設計、網站排名

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容