论坛 › 欢乐水吧 › 空想舞台

马黑黑 发表于 2023-3-10 08:03

空想舞台

本帖最后由 马黑黑 于 2023-3-10 08:06 编辑 <br /><br /><style>
#canv {
        margin: -80px 0 0 calc(50% - 593px);
        display: block;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        cursor: pointer;
        z-index: 1;
}
#vid { display: none; }
</style>

<canvas id="canv" width="1024" height="540"></canvas>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1894092291" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6dda0115f.mp4" autoplay loop muted></video>

<script>
(function() {
let ctx = canv.getContext('2d');
let loop = () => {
        ctx.drawImage(vid, 0, 0, 1024, 540);
        ctx.drawImage(vid,0,0,800,540,892,0,132,80);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
vid.addEventListener('play', loop, false);
let mState = () => aud.paused ? vid.pause() : vid.play();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('seeked', () => calcKey());
canv.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>

马黑黑 发表于 2023-3-10 08:03

帖子代码
<style>
#canv {
        margin: -80px 0 0 calc(50% - 593px);
        display: block;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        cursor: pointer;
        z-index: 1;
}
#vid { display: none; }
</style>

<canvas id="canv" width="1024" height="540"></canvas>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1894092291" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6dda0115f.mp4" autoplay loop muted></video>

<script>
let ctx = canv.getContext('2d');
let loop = () => {
        ctx.drawImage(vid, 0, 0, 1024, 540);
        ctx.drawImage(vid,0,0,800,540,892,0,132,80);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
vid.addEventListener('play', loop, false);
let mState = () => aud.paused ? vid.pause() : vid.play();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('seeked', () => calcKey());
canv.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

马黑黑 发表于 2023-3-10 08:05

右上角贴个狗皮膏药。最初设计是放标题，loop函数代码如下：

let loop = () => {
        ctx.drawImage(vid, 0, 0, 1024, 540);
        ctx.fillStyle = 'hsla(0,0%,0%,.65)';
        ctx.fillRect(893,20,100,22);
        ctx.font = 'bold 1.6em sans-serif';
        ctx.fillStyle = 'snow';
        ctx.fillText('空想舞台',890,40);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}

马黑黑 发表于 2023-3-10 08:11

思路：

帖子主场景由canvas画布构建，它将视频映射到自身上来。画布同一个时间对视频做了两次映射，右上角的映射是裁剪映射，意在盖住视频的logo，除此无他。

梦油 发表于 2023-3-10 09:22

灯光设计很美。

亦是金 发表于 2023-3-10 09:26

谢谢黑总代码分享，学习试做一个玩玩！{:4_191:}

红影 发表于 2023-3-10 09:44

这个只有很少的代码就实现了这么美的效果，画布真好{:4_187:}

红影 发表于 2023-3-10 09:49

ctx.drawImage(vid,0,0,800,540,892,0,132,80);再来复习一下这个。

根据这个drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，小图裁剪的宽度是800，高度540，开绘制的坐标横向890纵向坐0，也是左和上的两个值，绘制的小图宽度132，高度80

庶民 发表于 2023-3-10 09:52

太美了，真的羡慕您的制作。

红影 发表于 2023-3-10 09:52

马黑黑 发表于 2023-3-10 08:11
思路：

帖子主场景由canvas画布构建，它将视频映射到自身上来。画布同一个时间对视频做了两次映射，右上 ...

可以是两个不同视频么？

红影 发表于 2023-3-10 09:52

音乐很好听，喜欢这样的节奏和旋律{:4_187:}

起个网名好难 发表于 2023-3-10 12:07

马黑黑 发表于 2023-3-10 08:11
思路：

帖子主场景由canvas画布构建，它将视频映射到自身上来。画布同一个时间对视频做了两次映射，右上 ...

补丁打得好，有画中画的感觉{:5_106:}

马黑黑 发表于 2023-3-10 12:12

起个网名好难 发表于 2023-3-10 12:07
补丁打得好，有画中画的感觉

差不多

马黑黑 发表于 2023-3-10 12:14

梦油 发表于 2023-3-10 09:22
灯光设计很美。

空想的{:4_170:}

马黑黑 发表于 2023-3-10 12:14

亦是金 发表于 2023-3-10 09:26
谢谢黑总代码分享，学习试做一个玩玩！

嗯，这个容易掌握的

马黑黑 发表于 2023-3-10 12:15

红影 发表于 2023-3-10 09:52
可以是两个不同视频么？

当然。需要添加另一个video元素就好

马黑黑 发表于 2023-3-10 12:15

红影 发表于 2023-3-10 09:52
音乐很好听，喜欢这样的节奏和旋律

听了不容易犯困

马黑黑 发表于 2023-3-10 12:15

庶民 发表于 2023-3-10 09:52
太美了，真的羡慕您的制作。

{:4_190:}

梦油 发表于 2023-3-10 16:38

马黑黑 发表于 2023-3-10 12:14
空想的

再来几位演员就更好了

雨中悄然 发表于 2023-3-10 17:59

这台子也太好看了

查看完整版本: 空想舞台