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不适用于远程图片

回答

相关问题