HTML5中drawImage怎么使用

發(fā)布時間：2022-04-26 16:36:47 來源：億速云閱讀：120 作者：iii 欄目：大數(shù)據(jù)

本文小編為大家詳細介紹“HTML5中drawImage怎么使用”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“HTML5中drawImage怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

代碼如下：

<!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下會出現(xiàn)的問題。

解決方案

代碼如下:

<!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怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

HTML5中drawImage怎么使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽