HTML5中drawImage如何使用

發(fā)布時(shí)間：2021-06-23 15:18:20 來(lái)源：億速云閱讀：159 作者：Leah 欄目：web開(kāi)發(fā)

HTML5中drawImage如何使用，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(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>

其實(shí)這種寫(xiě)法是有錯(cuò)誤的，實(shí)際上只要一刷新圖片就不顯示出來(lái)。要想保證刷新正常顯示需要在Image onload的時(shí)候重繪一次才行。測(cè)試在chrome 19下會(huì)出現(xiàn)的問(wè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>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

HTML5中drawImage如何使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽