朵拉 发表于 2024-4-28 22:50

午夜恰恰（马黑黑原创）

本帖最后由 朵拉 于 2024-4-28 22:53 编辑 <br /><br /><style>
    #papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/662e626b0ea9cb1403002f86.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=1992997073" 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 = 20;
            imageData.data = 200;
            imageData.data = 200;
            imageData.data = 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 22:54

@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:}

马黑黑 发表于 2024-4-28 23:05

{:4_199:}

红影 发表于 2024-4-28 23:11

漂亮，欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 午夜恰恰（马黑黑原创）