如何点击按钮更换Canvas图片并重新启用禁用按钮？

需求说明 #

点击按钮时完成两项操作：

• 替换Canvas上显示的图片
• 重新启用之前被禁用的按钮

现有按钮代码 #

<div style="position:absolute; left:625px; top:100px; background-color:white;">
    <button id="btn1" type="button" onclick="alert('The guy was disapointed. The guards come in and detain him. I think I made the wrong choice'); document.getElementById('btn2').disabled = true;" >Detain</button>
    <button id="btn2" type="button" onclick="alert('The guy sighs in relief and looked happy. The guards guide him to the exit. I think I made the right decision'); document.getElementById('btn1').disabled = true;">Free them</button>
</div> 

现有Canvas代码 #

<img id="Man2" width="0" height="0" src="Man2.PNG" alt="Man2">

<canvas id="myCanvas1" width="600" height="450" style="border:1px solid grey;"></canvas>

<script>
window.onload = function() {
  const canvas = document.getElementById("myCanvas1");
  const ctx = canvas.getContext("2d");
  const img = document.getElementById("Man2");
  ctx.drawImage(img, 10, 10);
};
</script>

当前Canvas显示图片 #

目标替换图片 #

尝试情况 #

曾尝试添加新按钮ID并通过ID获取Canvas元素，但未实现需求。

解决方案 #

以下是修改后的完整代码，实现点击按钮切换图片并恢复禁用按钮的功能：

<!-- 隐藏的图片资源：原图片 + 目标图片 -->
<img id="Man2" width="0" height="0" src="Man2.PNG" alt="原图片">
<img id="Man3" width="0" height="0" src="https://i.sstatic.net/a3xKD.png" alt="目标图片">

<!-- Canvas容器 -->
<canvas id="myCanvas1" width="600" height="450" style="border:1px solid grey;"></canvas>

<!-- 操作按钮 -->
<div style="position:absolute; left:625px; top:100px; background-color:white;">
    <button id="btn1" type="button" onclick="handleButtonClick(true)">扣押</button>
    <button id="btn2" type="button" onclick="handleButtonClick(false)">释放</button>
</div>

<script>
// 页面加载完成后绘制初始图片
window.onload = function() {
  const canvas = document.getElementById("myCanvas1");
  const ctx = canvas.getContext("2d");
  const img = document.getElementById("Man2");
  ctx.drawImage(img, 10, 10);
};

// 按钮点击处理函数
function handleButtonClick(isDetain) {
    // 显示对应提示信息
    if (isDetain) {
        alert('那家伙一脸失望，警卫进来把他扣下了。我觉得我选错了');
    } else {
        alert('那家伙松了口气，看起来很开心。警卫引导他走向出口。我觉得我做了正确的决定');
    }

    // 获取画布和上下文
    const canvas = document.getElementById("myCanvas1");
    const ctx = canvas.getContext("2d");
    
    // 清空画布，避免图片重叠
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 选择要绘制的图片：点击「扣押」显示目标图，点击「释放」显示原图
    const targetImg = isDetain ? document.getElementById("Man3") : document.getElementById("Man2");
    ctx.drawImage(targetImg, 10, 10);

    // 切换按钮状态：启用之前被禁用的按钮，禁用当前点击的按钮
    const btn1 = document.getElementById("btn1");
    const btn2 = document.getElementById("btn2");
    
    btn1.disabled = !isDetain;
    btn2.disabled = isDetain;
}
</script>

代码说明 #

1. 新增图片资源：添加隐藏的img元素存放目标图片，确保图片可被Canvas调用
2. 封装处理逻辑：把按钮点击后的提示、图片切换、按钮状态管理整合到函数中，避免内联代码混乱
3. 清空画布：每次绘制新图片前用clearRect清空画布，防止新旧图片重叠
4. 按钮状态自动切换：根据点击的按钮，自动恢复另一个按钮的可用状态，同时禁用当前点击的按钮

内容的提问来源于stack exchange，提问作者ToMadToCode