object.draw(） 显示了 al object.draw(） 调用中最后定义的图像

object.draw() shows last defined image on al object.draw() calls

本文关键字：object draw 定义 图像 最后 al 显示 调用      更新时间：2023-09-26

我对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>

我想你在指定 src 标签时错过了这一点:)

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

试试这个。

相关文章：