通过在图像上加载一个遮罩来改变图像中不同位置的透明度。
// 创建全局变量
let img;
let imgMask;
function preload() {
// 加载图像及图像遮罩
img = loadImage('https://sh-cdn-tos.aleshu.com/ickerlab_storages/userid_1/2023-07-31/1690830787_image.png');
imgMask = loadImage('https://sh-cdn-tos.aleshu.com/ickerlab_storages/userid_1/2023-07-31/1690838827_image.png');
}
function setup() {
// 画布：720 * 400
createCanvas(720, 400);
// mask() 函数可以将图像遮罩覆盖在图像上
img.mask(imgMask);
// 为了让图片在跟随鼠标时，以图片中心为跟随点，因此设置图片模式为CENTER
imageMode(CENTER);
}
function draw() {
// 设置背景颜色（藏青色）
background(0, 102, 153);
// 图像1，固定不动，注意，由于受imageMode影响，图片定位不再是(0, 0)
image(img, width / 2, height / 2);
// 图像2，跟随鼠标
image(img, mouseX, mouseY);
}
new p5();
