canvas，drawImage不適用於遠程圖片

我想從web上繪製圖片，所以我有以下html5代碼，這是W3C Shool的示例，但是當我在Chrome中加載html頁面時，圖像顯示。canvas，drawImage不適用於遠程圖片

<!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'，但它仍不起作用。

來源

2012-11-22 zdd

問題是，您正試圖在加載之前繪製圖像。試試這樣的：

<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>

來源

2012-11-22 09:19:56 angio

爲什麼W3C沒有在他們的網頁上提到這個？他們給出了一個沒有onload函數的例子。 http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_image – zdd

canvas，drawImage不適用於遠程圖片

回答

相關問題