本帖最后由 花简静 于 2024-5-1 17:06 编辑
<style>
#papa { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/51tm88.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden;pointer-events: none; position: relative; }
#papa::after, #vid { position: absolute; right: 230px; top: 325px; width: 620px; height:620px; border-radius: 0 40%; transform: rotate(45deg); }
#papa::after { content: ''; cursor: pointer; pointer-events: auto; box-shadow: 0 0 8px rgba(255, 255, 255, .2); }
#canv { position: absolute; transform: rotate(135deg);}
#vid { object-fit: cover; mix-blend-mode: screen; filter: hue-rotate(270deg) opacity(.6); }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=17961727" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/01/39/5b4221b08c311.mp4" loop muted></video>
<canvas id="canv" width="1700" height="1300" ></canvas>
</div>
<script>
var ctx = canv.getContext('2d', {willReadFrequently: true});
var ww = canv.width, hh = canv.height, pixels = [];
for (var x = -400; x < 400; x += 5) {
for (var z = -250; z < 250; z += 5) {
pixels.push({ x: x, y: 100, z: z });
}
}
let render = (ts) => {
var imageData = ctx.getImageData(0, 0, ww, hh), len = pixels.length, fov = 250;
var pixel, scale, x2d, y2d, c;
for (var i = 0; i < len; i++) {
pixel = pixels;
scale = fov / (fov + pixel.z);
x2d = pixel.x * scale + ww / 2;
y2d = pixel.y * scale + hh / 2;
if (x2d >= 0 && x2d <= ww && y2d >= 0 && y2d <= hh) {
c = (Math.round(y2d) * imageData.width + Math.round(x2d)) * 4;
imageData.data[c] = 20;
imageData.data[c + 1] = 200;
imageData.data[c + 2] = 200;
imageData.data[c + 3] = 245;
}
pixel.z -= 0.4;
pixel.y = hh / 14 + Math.sin(i / len * 15 + (ts / 450)) * 10;
if (pixel.z < -fov) pixel.z += 2 * fov;
}
ctx.putImageData(imageData, 0, 0);
};
(function drawFrame(ts) {
requestAnimationFrame(drawFrame);
if(!aud.paused) {
ctx.clearRect(0, 0, ww, hh);
render(ts);
}
})();
aud.onplaying = aud.onpause = () => aud.paused ? vid.pause() : vid.play();
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<Br><Br><Br><Br><Br><Br>
| 
