html - 如何从另一个域为画布加载 img src？

Question

当我在画布中加载图像并指定其 src 时，我使用与 html 文件位于同一文件夹中的文件名，并加载 img。所以它会是这样的：

img.src = 'Untitled.png'; 

但是如果我尝试这个，img 不会加载

img.src = 'http://dgroover.wikispaces.com/file/view/bill-gates-car.jpg'; 

有谁知道出了什么问题？

Answer 1

使用此代码：

标记部分

<canvas id="cnv" width="500" height="500"></canvas>

脚本部分

var img = new Image();
img.onload = function(){
    document.getElementById("cnv").getContext("2d").drawImage(this,0,0);
};
img.src="http://dgroover.wikispaces.com/file/view/bill-gates-car.jpg";​

演示

Answer 2

以这种方式尝试：

> var canvas = document.getElementById("myCanvas");
>         var ctx = canvas.getContext("2d");      
>         ctx.translate(0.5, 0.5);
>         ctx.strokeStyle = "#5F7FA2";
>         ctx.strokeRect(50, 50, 25, 25);
>         var img = new Image();
>         img.src = "http://www.cs.washington.edu/education/courses/csep576/05wi/projects/project4/web/artifact/liebling/average_face.gif";
>         img.onload = function(){
>         ctx.drawImage(img, 50, 50);}