本帖最后由 马黑黑 于 2024-4-28 10:43 编辑
帖子代码
<style>
#papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/u30.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; pointer-events: none; position: relative; }
#papa::after, #vid { position: absolute; left: calc(50% - 125px); top: 55px; width: 200px; height: 200px; 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; }
#vid { object-fit: cover; mix-blend-mode: screen; filter: hue-rotate(300deg) opacity(.5); }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1316563784" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/83/5b4abcfb3acff.mp4" loop muted></video>
<canvas id="canv" width="1024" height="640"></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[ i ];
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>
| 
发表于 2024-4-28 10:34
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-4-28 11:02
发表于 2024-4-28 12:37
