空想舞台

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #canv {
   
3.         margin: -80px 0 0 calc(50% - 593px);
   
4.         display: block;
   
5.         box-shadow: 3px 3px 20px #000;
   
6.         position: relative;
   
7.         cursor: pointer;
   
8.         z-index: 1;
   
9. }
   
10. #vid { display: none; }
    
11. </style>
    
12. 
    
13. <canvas id="canv" width="1024" height="540"></canvas>
    
14. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1894092291" autoplay loop></audio>
    
15. <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6dda0115f.mp4" autoplay loop muted></video>
    
16. 
    
17. <script>
    
18. let ctx = canv.getContext('2d');
    
19. let loop = () => {
    
20.         ctx.drawImage(vid, 0, 0, 1024, 540);
    
21.         ctx.drawImage(vid,0,0,800,540,892,0,132,80);
    
22.         if(!vid.paused) {
    
23.                 requestAnimationFrame(loop);
    
24.                 return;
    
25.         }
    
26. }
    
27. vid.addEventListener('play', loop, false);
    
28. let mState = () => aud.paused ? vid.pause() : vid.play();
    
29. aud.addEventListener('play', () => mState());
    
30. aud.addEventListener('pause', () => mState());
    
31. aud.addEventListener('seeked', () => calcKey());
    
32. canv.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
    
33. </script>

复制代码

马黑黑

右上角贴个狗皮膏药。最初设计是放标题，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;
        }
}

马黑黑

思路：

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

梦油

灯光设计很美。

亦是金

谢谢黑总代码分享，学习试做一个玩玩！

红影

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

红影

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 08:11
思路：

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

可以是两个不同视频么？

红影

音乐很好听，喜欢这样的节奏和旋律

起个网名好难

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

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

补丁打得好，有画中画的感觉

马黑黑

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

差不多

马黑黑

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

空想的

马黑黑

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

嗯，这个容易掌握的

马黑黑

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

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

马黑黑

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

听了不容易犯困

马黑黑

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

梦油

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

再来几位演员就更好了

雨中悄然

这台子也太好看了