使用 p5.js 的 HTML、CSS 和 JavaScript 代码示例 当光标悬停在另一张图片下方时显示一张图片
P5.js 光标仅在光标半径内显示顶部图像下方的基本图像
<!DOCTYPE html>
<html>
<head>
<title>p5.js Image Reveal on Hover</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="sketch.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<img class="base-image" src="https://png.pngtree.com/png-vector/20220620/ourmid/pngtree-white-cloud-weather-climate-png-image_5215887.png">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
CSS 样式.css
.container {
position: relative;
}
.base-image {
position: absolute;
top: 0;
left: 0;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
JS sketch.js
let canvas;
let baseImage;
let revealImage;
let revealRadius = 50;
function preload() {
baseImage = loadImage('https://png.pngtree.com/png-vector/20220620/ourmid/pngtree-white-cloud-weather-climate-png-image_5215887.png');
revealImage = loadImage('https://png.pngtree.com/png-vector/20220620/ourmid/pngtree-cloud-weather-climate-free-cutout-nature-png-image_5215871.png');
}
function setup() {
canvas = createCanvas(500, 500);
canvas.parent('canvas');
}
function draw() {
background(255);
image(baseImage, 0, 0, width, height);
if (mouseIsPressed) {
reveal();
}
}
function reveal() {
noStroke();
fill(0);
ellipse(mouseX, mouseY, revealRadius, revealRadius);
loadPixels();
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
let d = dist(x, y, mouseX, mouseY);
if (d <= revealRadius / 2) {
let index = (x + y * width) * 4;
pixels[index] = red(revealImage.get(x, y));
pixels[index + 1] = green(revealImage.get(x, y));
pixels[index + 2] = blue(revealImage.get(x, y));
pixels[index + 3] = 255;
}
}
}
updatePixels();
}
不明白为什么它不起作用。
您可以使用 clip 函数来 clip() 并停止绘图上下文。此外，您在小提琴中的图像在检查窗口中有一个 cors 问题。
function reveal() {
drawingContext.save();
ellipse(mouseX, mouseY, clipSize, clipSize);
drawingContext.clip();
copy(revealImage,
mouseX-halfClip, mouseY-halfClip, clipSize, clipSize,
mouseX-halfClip, mouseY-halfClip, clipSize, clipSize);
drawingContext.restore();
}
revealImage 是显示的图像。
编辑或者像你做的那样你必须改变图像以避免cors你也不能访问画布并在设置函数中给它一个父级你可以在需要时等待。
function awaitCanvas(){
canvas=select('canvas');
if(!canvas){
requestAnimationFrame(awaitCanvas);
}else{
canvas.parent('canvas');
}
}
<div class="container">
<div id="canvas"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
<script>
function sketch(p) {
let canvas;
let baseImage;
let revealImage;
let revealRadius = 50;
p.preload = () => {
baseImage = p.loadImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXAxUucEZQBa-rVi28Hh6HCMEZ7-1JMnZOpLn5u9lBoQ&s');
revealImage = p.loadImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRCm5KNqq_84W1zvrAFNytFdlfte-l2mg7vO--bmh6Vw&s');
};
p.setup = () => {
canvas = p.createCanvas(500, 500);
};
var resized = false;
p.draw = () => {
if (!resized) {
revealImage.resize(p.width, p.height);
}
p.background(255);
p.image(baseImage, 0, 0, p.width, p.height);
if (p.mouseIsPressed) {
reveal(p);
}
}
function reveal(p) {
p.noStroke();
p.fill(0);
p.ellipse(p.mouseX, p.mouseY, revealRadius, revealRadius);
// revealImage.loadPixels();
p.loadPixels();
for (let x = 0; x < p.width; x++) {
for (let y = 0; y < p.height; y++) {
let d = p.dist(x, y, p.mouseX, p.mouseY);
if (d <= revealRadius / 2) {
c = revealImage.get(x, y);
p.set(x, y, c);
}
}
}
p.updatePixels();
}
}
new p5(sketch);
</script>