如何根据将图像放入 javascript 进行循环？

Question

这是我的脚本

function initCanvas(){
var canvasbg = document.getElementById('canvas_background').getContext('2d');
var imageObj = new Image();
imageObj.src = "";

function drawBox(){
    this.x = 0, this.y = 0, this.src = imageObj.src;
    this.render = function(){
        canvasbg.drawImage(imageObj, this.x, this.y);
    }
}

var box = new drawBox();
box.src = "Images/Buildings/PokemonCenter.png";
box.x = 50;
box.y = 50;

function animate(){
    box.render();
}

var animateInterval = setInterval(animate, 30);
}

window.addEventListener('load', function(event){
initCanvas();
 });

我试着把src放在imageObj.src = "Images/Buildings/PokemonCenter.png";下。

然后，是的，它在那里工作，但是当我尝试放入 box.src 时，它没有出现。

有办法吗？所以我不能用 drawImage

的很多功能淹没我的脚本

Answer 1

它没有使用 box.src 显示，因为它在指定 drawBox 时未定义。你需要重新考虑你的结构。一个更好的方法是使用这样的方法：

function drawBox (parameters) {
     this.x = parameters.x || 0, 
     this.y = parameters.y || 0;
     this.image = new Image();
     this.image.src = parameters.src || "";
     this.render = function (canvas) {
         canvas.drawImage(this.image, this.x, this.y);
     }
}

var box = new drawBox({
    x: 50, 
    y: 50,
    src: "https://www.gravatar.com/avatar/b1c8ae5b2e357e18d61bfb0dfd39136c?s=32&d=identicon&r=PG&f=1"
});

function animate(){
    box.render(canvasbg);
}

通过这种方式，您可以将动态参数发送到 drawBox 函数，如果未指定，它可以回退到默认值。渲染函数也更容易使用，因为您可以在 animate 函数中指定 canvas 将图像渲染到什么上。 Here's 工作 fiddle。

如何根据将图像放入 javascript 进行循环？

How to do loop based of putting image in javascript?

javascript

canvas

html5-canvas