Question

我想这样做，当我运行一个函数时，它会更改函数中对象的图像，我认为这样可行

for(var i = 0; i < heads.length; i++){heads[i].src = ram_head;}

ram_head等于带有url的字符串，但是当我运行代码时，运行该函数时图像根本不会改变。

代码示例：http://jsfiddle.net/themagicalcake/URvA7

Answer 1

以下代码：

创建一个图像对象（头部）数组
为所有这些图片对象指定相同的图片网址（rams_head）
当每个图像完全加载时，将该图像绘制到画布上。

示例代码和演示：http://jsfiddle.net/m1erickson/5DXe7/

var ram_head="https://dl.dropboxusercontent.com/u/139992952/multple/RAMDISEGNO.jpg";

var heads=[];
heads.push(new Image());
heads.push(new Image());

for(var i=0;i<heads.length;i++){

    heads[i].onload=function(){
        ctx.drawImage(this,this.x,10);
    }

    heads[i].x=i*100;

    heads[i].src=ram_head;

}

Answer 2

我发现您现在链接到的代码有三个问题：

当您设置Image对象的.src时，在加载新的.src URL图像之前，您无法使用该图像进行绘制。如果你想更改.src然后绘制，你必须处理onload事件并在触发时绘制。
在onkeydown处理程序中，您设置了heads[i].src，但图片对象为heads[i].img，因此图片的.src为heads[i].img.src }。
由于您没有在DOM中显示原生<img>标记，而是自己绘制图像，因此在更改图像的.src后等待新图像要加载，如果您希望图像显示在绘图上下文中，则必须自己重绘。我不会仅仅因为您更改.src。

更改对象的图像

2 个答案: