Javascript object.draw（）显示所有object.draw（）调用上最后定义的图像_Javascript_Object_Canvas

Javascript object.draw（）显示所有object.draw（）调用上最后定义的图像

javascript object canvas

Javascript object.draw（）显示所有object.draw（）调用上最后定义的图像,javascript,object,canvas,Javascript,Object,Canvas,我对javascript/编程相当陌生，我正在试验我编写的一些基本的画布游戏脚本。我试图使4个背景图像在一个关键事件上以不同的速度向左或向右移动。到目前为止，一切正常当我在画布上绘制这4幅图像时，问题就开始了。所有x、y和h、w设置工作正常，接受图像本身。在反画布上，它显示所有图形的相同（上次定义）图像。我现在知道我在这件事上哪里出错了希望你们能帮助我！提前通知 <!DOCTYPE HTML> <html> <head> <title>

我对javascript/编程相当陌生，我正在试验我编写的一些基本的画布游戏脚本。我试图使4个背景图像在一个关键事件上以不同的速度向左或向右移动。到目前为止，一切正常

当我在画布上绘制这4幅图像时，问题就开始了。所有x、y和h、w设置工作正常，接受图像本身。在反画布上，它显示所有图形的相同（上次定义）图像。我现在知道我在这件事上哪里出错了

希望你们能帮助我！提前通知

<!DOCTYPE HTML>
<html>
<head>
    <title>Canvas test game/ movement</title>
</head>
<body>
<canvas id="myCanvas" width="1600" height="1000"></canvas>
<footer></footer>
</body>
<script>
    var canvas  = document.getElementById('myCanvas'),
            context = canvas.getContext('2d'),
            img     = new Image();

    var newImage = function(){
        this.image = function(name){
            img.src="./images/" + name;
        };
        this.setSize = function(w, h){
            this.w = w;
            this.h = h;
        };
        this.setPosition = function(x, y){
            this.x = x;
            this.y = y;
        };
        this.setSpeed = function(speed){
            this.speed = speed;
        };
        this.changePosition = function(direction){
            if (direction){
                this.x = this.x + this.speed;
            } else {
                this.x = this.x - this.speed;
            }
        };
        this.draw = function(){
            context.drawImage(img, this.x, this.y, this.w, this.h);
        };
    };

    var move = function(direction){
        achtergrond.changePosition(direction);
        maan.changePosition(direction);
        landschapAchter.changePosition(direction);
        landschapVoor.changePosition(direction);
    };

    var achtergrond = new newImage();
    achtergrond.image("galaxy.png");
    achtergrond.setSize(1600, 1000);
    achtergrond.setPosition(0, 0);
    achtergrond.setSpeed(0);

    var maan = new newImage();
    maan.image("maan.png");
    maan.setSize(400, 400);
    maan.setPosition(200, 100);
    maan.setSpeed(1);

    var landschapAchter = new newImage();
    landschapAchter.image("landschapAchter.png");
    landschapAchter.setSize(3200, 500);
    landschapAchter.setPosition(0, 450);
    landschapAchter.setSpeed(2);

    var landschapVoor = new newImage();
    landschapVoor.image("landschapVoor.png"); // In the browser all 4 (achtergrond, maan, landschapAchter and landschapVoor) objects show this img on object.draw()
    landschapVoor.setSize(4294, 400);
    landschapVoor.setPosition(0, 600);
    landschapVoor.setSpeed(3);

    var checkKey = function(e){
        e = e || window.event;
        if (e.keyCode == '37') {
            move(1);
        } else if (e.keyCode == '39') {
            move(0);
        }
        // Move images on key event
        context.clearRect ( 0, 0 , 1600 , 1000 );
        achtergrond.draw();
        maan.draw();
        landschapAchter.draw();
        landschapVoor.draw();
    };

    window.onload = function(){
        maan.draw();
        landschapAchter.draw();
        landschapVoor.draw();
        achtergrond.draw();
    }

    document.onkeydown = checkKey;
</script>
</html>


帆布测试游戏/运动
var canvas=document.getElementById（'myCanvas'），
context=canvas.getContext（'2d'），
img=新图像（）；
var newImage=函数（）{
this.image=函数（名称）{
img.src=“./images/”+名称；
};
this.setSize=函数（w，h）{
这个.w=w；
这个，h=h；
};
this.setPosition=函数（x，y）{
这个.x=x；
这个。y=y；
};
this.setSpeed=功能（速度）{
速度=速度；
};
this.changePosition=功能（方向）{
如果（指示）{
this.x=this.x+this.speed；
}否则{
this.x=this.x-this.speed；
}
};
this.draw=函数（）{
drawImage（img，this.x，this.y，this.w，this.h）；
};
};
变量移动=功能（方向）{
转向位置（方向）；
改变位置（方向）；
landschapAchter.改变位置（方向）；
landschapVoor.改变位置（方向）；
};
var achtergrond=new newImage（）；
图片（“galaxy.png”）；
设置大小（1600，1000）；
设定位置（0,0）；
设定速度（0）；
var maan=newImage（）；
maan.image（“maan.png”）；
最大设定尺寸（400400）；
设定位置（200100）；
最大设定速度（1）；
var landschapAchter=newnewimage（）；
landschapAchter.image（“landschapAchter.png”）；
landschapAchter.setSize（3200500）；
landschapAchter.设定位置（0450）；
landschapAchter.设定速度（2）；
var landschapVoor=newImage（）；
landschapVoor.image（“landschapVoor.png”）；//在浏览器中，所有4个对象（achtergrond、maan、landschapAchter和landschapVoor）都在object.draw（）上显示此img
landschapVoor.setSize（4294400）；
landschapVoor.setPosition（0600）；
landschapVoor.设定速度（3）；
var checkKey=函数（e）{
e=e | | window.event；
如果（e.keyCode=='37'）{
动议（1）；
}否则如果（e.keyCode=='39'）{
移动（0）；
}
//在关键事件上移动图像
context.clearRect（0,0,1600,1000）；
achtergrond.draw（）；
maan.draw（）；
landschapAchter.draw（）；
landschapVoor.draw（）；
};
window.onload=函数（）{
maan.draw（）；
landschapAchter.draw（）；
landschapVoor.draw（）；
achtergrond.draw（）；
}
document.onkeydown=checkKey；

我认为您在指定src标记时忽略了这一点：）

试试这个。

是的，我知道我忽略了一些愚蠢的事情！谢谢@Rajesh Dhiman！现在效果很好。

var newImage = function(){
    this.image = function(name){
        this.src="./images/" + name;
    };