有没有办法通过单击按钮来更改画布上的图像？-解网

问：

单击后，我希望图像在画布上更改。重新启用已禁用的按钮时。

这是我的按钮代码

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

这里是我的画布代码

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

这是画布上已经出现的图像。

这就是我想要图像变成的样子。

我尝试添加另一个按钮 id 并尝试在画布上通过 Id 获取元素，但它不起作用。

HTML 按钮画布 onclick

<div style="position:absolute; left:625px; top:100px; background-color:white;">
    <button id="btn1" type="button" onclick="detain()">Detain</button>
    <button id="btn2" type="button" onclick="free()">Free them</button>
</div> 

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

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    //Image IDS
    var imageMan1 = "Man1.png";
    var imageMan2 = "Man2.png";

    changeImage(imageMan2); //First image loaded on the canvas


    function detain() {
        alert('The guy was disappointed. The guards come in and detain him. I think I made the wrong choice');
        document.getElementById('btn2').disabled = false;
        document.getElementById('btn1').disabled = true;
        changeImage(imageMan1); //Change based on button click
    }

    function free() {
        alert('The guy sighs in relief and looks happy. The guards guide him to the exit. I think I made the right decision');
        document.getElementById('btn1').disabled = false;
        document.getElementById('btn2').disabled = true;
        changeImage(imageMan2); //Change based on button click
    }

    function changeImage(imageSrc) {
        ctx.clearRect(0, 0, canvas.width, canvas.height); //This should clear the canvas
        var img = new Image();
        img.src = imageSrc;
        img.onload = () => {ctx.drawImage(img, 10, 10);};  
    }
</script>

在此代码段中，按钮单击在脚本标记内处理，尤其是在创建画布并存在引用之后。

编辑

在我们的讨论之后，我花了一点时间测试代码，导致它在加载图像时调用（）。ctx.drawImageimg.onload

然而，这只在第一次执行时有效，因为在那之后，两个图像都被加载了，所以内部没有效果。img.onloadchangeImage

因此，在 js 中拥有图像路径并立即将它们加载到那里是要走的路（特别是如果您计划拥有更多，这将导致 HTML 中有很多 Image 标签，而这些标签实际上并没有被使用）

有没有办法通过单击按钮来更改画布上的图像？

Is there a way to change the image on a canvas, with a button click?

评论

编辑

评论