更新 HTML Canvas 上的现有图像

Posted 2023-03-05

【中文标题】更新 HTML Canvas 上的现有图像

【英文标题】：Update exsisting image on HTML Canvas

【发布时间】：2022-01-23 03:30:32

【问题描述】：

我正在为我的公司年终游戏大会做一个小项目。我是第一次使用 html 画布，但已经到了卡住的地步。

我在画布上有团队成员的图像。我想要做的是，当我点击他们的图片时，这将是使用的图片。

首先，我有一个默认图像作为所选图像：

let selectedImage = 'default.png';

然后我将初始图像设置为所选图像：

const bird = 
     curImg: selectedImage,
     ...

当用户点击画布上的图片时，我正在尝试更新将在游戏中使用的图片：

const canvas = document.getElementById('canvas2');
canvas.addEventListener('mousedown', function(e) 
    let coords = getCursorPosition(canvas, e);
    if (coords['x'] > 10 && coords['x'] < 75) 
        selectedImage = "Akshay.png";
    
,

这应该会用选定的 Akshay.png 图像替换当前的 default.png 图像，但画布上的图像不会改变。我可以看到 selectedImage 变量正在更新为 Akshay.png，但默认图像仍然存在。我尝试在更新 selectedImage 后添加 draw 方法，但它仍然不会改变：

bird.draw();

我不确定我在这方面会出错，但如果有任何建议，我将不胜感激，如果需要，我可以提供更多代码或信息。

感谢您对此提供的任何帮助。

编辑：添加了画布代码。

这是播放器的draw方法：

const bird = 
     curImg: selectedImage,
     animations :
        [
            sprite : new Image(),
            sprite : new Image(),
            sprite : new Image(),
            sprite : new Image(),
        ],
    rotatation : 0,
    x : 50,
    y :100,
    speed : 0,
    gravity : .120,
    thrust : 3.0,
    frame:0,
    draw : function() 
        let h = this.animations[this.frame].sprite.height;
        let w = this.animations[this.frame].sprite.width;
        sctx.save();
        sctx.translate(this.x,this.y);
        sctx.rotate(this.rotatation*RAD);
        sctx.drawImage(this.animations[this.frame].sprite,-w/2,-h/2);
        sctx.restore();
    ,
    update : function() 

我仍在制作的动画也是如此：

bird.animations[0].sprite.src="img/bird/devs/" + selectedImage;
bird.animations[1].sprite.src="img/bird/devs/" + selectedImage;
bird.animations[2].sprite.src="img/bird/devs/" + selectedImage;
bird.animations[3].sprite.src="img/bird/devs/" + selectedImage;

这里是更新函数：

function update()
 
  bird.update();  
  gnd.update();
  pipe.update();
  UI.update();
 
 function draw()
 
    // sctx.fillStyle = "#30c0df";
    sctx.fillRect(0,0,scrn.width,scrn.height)
    bg.draw();
    pipe.draw();
    
    bird.draw();
    gnd.draw();
    UI.draw();
 

我尝试过 Google 搜索并询问了一位朋友，但仍然无法弄清楚这一点。谢谢！

【问题讨论】：

看看画布代码肯定很有用。

我已经更新了代码。感谢您的帮助！

【参考方案1】：

我不确定这是否是正确的方法，但我得到了它的工作，但更新了动画 src：

const canvas = document.getElementById('canvas2');
canvas.addEventListener('mousedown', function(e) 
    let coords = getCursorPosition(canvas, e);
    if (coords['x'] > 10 && coords['x'] < 75) 
        bird.animations[0].sprite.src = "img/bird/devs/Akshay.png";
        bird.animations[1].sprite.src = "img/bird/devs/Akshay.png";
        bird.animations[2].sprite.src = "img/bird/devs/Akshay.png";
        bird.animations[3].sprite.src = "img/bird/devs/Akshay.png";
    
,