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函数中指定要渲染图像的画布。 Here's一个工作小提琴。

如何根据javascript中的图像进行循环？

1 个答案: