畫布，drawImage 不適用於遠程圖片

Question

我想從網絡上畫一張圖片，所以我有以下 html5 代碼，這是 W3C Shool 的示例，但是當我在 Chrome 中加載 html 頁面時，顯示了圖像。

<!DOCTYPE html>
<html>
    <body>
        <canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
            Your browser does not support the canvas element.
        </canvas>

        <script type="text/javascript">
            var c=document.getElementById("myCanvas");
            var cxt=c.getContext("2d");
            var img=new Image();
            img.src='http://www.w3school.com.cn/i/ct_html5_canvas_image.gif';
            cxt.drawImage(img, 0, 0);
        </script>
    </body>
</html>

圖片來自w3school，可以在我的Chrome中查看，我的Chrome是最新版本，所以不知道問題出在哪里，我什至嘗試將圖片下載到我的本地機器並將其放在同一目錄中在上面的html頁面中，將代碼更改為img.src='flower.gif'，但它仍然不起作用。

Answer 1

問題是您試圖在加載圖像之前繪制圖像。 嘗試這樣的事情：

    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>

    <script type="text/javascript">

        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");

        var img=new Image();
        img.src='http://www.w3school.com.cn/i/ct_html5_canvas_image.gif';

        img.onload = draw;

        function draw(){               
            cxt.drawImage(img, 0, 0);            
        }


    </script>

畫布，drawImage 不適用於遠程圖片

問題描述

1 個解決方案

解決方案1
2 已采納 2012-11-22 09:19:56

畫布，drawImage 不適用於遠程圖片

問題描述

1 個解決方案

解決方案1 2 已采納 2012-11-22 09:19:56

解決方案1
2 已采納 2012-11-22 09:19:56