Javascript 如何隐藏或淡出图像（使用loadImage创建）？

我有一个正在使用

loadImage

渲染的图像。当我在键盘上按h键时，如何使其隐藏图像？我怎样才能淡出图像

代码：

index.html

图像测试

script.js

let-img；
函数预加载（）{
img=loadImage（'https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500')
}
函数设置（）{
createCanvas（500300）；
}
函数绘图（）{
背景（225）；
填充（0）；
图像（img，0,0）
}

我认为最简单的方法就是使用

下面是一个基本演示：水平移动鼠标以更改透明度：

let-img；
设α=255；
函数预加载（）{
img=loadImage（'https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500')
}
函数设置（）{
createCanvas（500300）；
}
函数绘图（）{
alpha=map（mouseX，0，width，0255）；
背景（225）；
填充（0）；
圆圈（mouseX，mouseY，30）；
色调（255，α）；
图像（img，0,0）
}

---

这是谷歌首次在“p5淡入淡出图像”@AndyRay中搜索到文本，而不是图像。当我添加图像时，它不起作用。我相信你自己完全有能力做到这一点。你需要一些“成分”：1.创建一个全局布尔变量来跟踪图像是否应该褪色（

让isfacing=false

）。2.使用

按键（）。3.在
draw（）
中，检查淡入布尔值是否为
true
，如果为true，只需降低透明度值（例如
alpha-；
）。您可能还想检查alpha是否小于0，如果是，请将其保持在0（或者您可以使用。祝您玩得开心！