论坛 › 欢乐水吧 › 钻石世界

马黑黑 发表于 2022-8-24 08:44

钻石世界

<style>
        #papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center;box-shadow: 3px 3px 20px #000; opacity: .95; position: relative; z-index: 3; }
        #lrcbox { position: absolute; top: 20px; font: normal 1.8em sans-serif; color: #50616d; text-shadow: 1px 1px 2px #000, -5px -5px 10px rgba(0,0,0,.65); }
        #disc { position: absolute; width: 40px; height: 40px; left: 507px; top: 302px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 5px,red 0); -webkit-mask: radial-gradient(transparent 5px,red 0); border-radius: 50%; cursor: pointer; z-index: 10; animation: rot 2s linear infinite; }
        #canv { margin: auto; display: block; position: relative; border: 1px solid; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <span id="disc"></span>
</div>

<script>

let ctx = canv.getContext('2d'), mypic = new Image(), aud = new Audio();
let w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight;
let num = (x,y) => Math.floor(Math.random() * (x - y + 1) + y);

mypic.src = 'https://638183.freep.cn/638183/Pic/2022/zhuzi.jpg';
mypic.onload = () => draw();

aud.src = 'https://music.163.com/song/media/outer/url?id=449578097.mp3';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => disc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => disc.style.animationPlayState = 'paused');
aud.addEventListener('timeupdate', () => draw());

function draw() {
        ctx.clearRect(0, 0, canv.width, canv.height);
        ctx.drawImage(mypic, 0, 0, w, h);
        ctx.shadowOffsetX = 4;
        ctx.shadowOffsetY = 4;
        ctx.shadowBlur = 8;
        ctx.shadowColor = 'rgba(0,0,0,.5)';
        ctx.font = 'bold 60px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
       
        for(j = 0; j < 100; j ++) {
                ctx.fillStyle = 'hsla(' + num(0,360) + ', 100%, 50%, 0.65)';
                let r = num(20, 5), x = num(r, canv.width - r), y = num(r, canv.height - r);
                ctx.beginPath();
                ctx.arc(x, y, r, 0, Math.PI * 2);
                ctx.fill();
        }
        ctx.strokeStyle = 'hsl(' + num(0, 360) + ', 100%, ' + num(20, 80) + '%)';
        ctx.beginPath();
        ctx.strokeText('钻石    世界', canv.width / 2 + 15, canv.height / 2);
}

</script>

马黑黑 发表于 2022-8-24 08:53

代码分享（全）：
<style>
        #papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center;box-shadow: 3px 3px 20px #000; opacity: .95; position: relative; z-index: 3; }
        #lrcbox { position: absolute; top: 20px; font: normal 1.8em sans-serif; color: #50616d; text-shadow: 1px 1px 2px #000, -5px -5px 10px rgba(0,0,0,.65); }
        #disc { position: absolute; width: 40px; height: 40px; left: 507px; top: 302px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 5px,red 0); -webkit-mask: radial-gradient(transparent 5px,red 0); border-radius: 50%; cursor: pointer; z-index: 10; animation: rot 2s linear infinite; }
        #canv { margin: auto; display: block; position: relative; border: 1px solid; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <span id="disc"></span>
</div>

<script>

let ctx = canv.getContext('2d'), mypic = new Image(), aud = new Audio();
let w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight;
let num = (x,y) => Math.floor(Math.random() * (x - y + 1) + y);

mypic.src = 'https://638183.freep.cn/638183/Pic/2022/zhuzi.jpg';
mypic.onload = () => draw();

aud.src = 'https://music.163.com/song/media/outer/url?id=449578097.mp3';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => disc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => disc.style.animationPlayState = 'paused');
aud.addEventListener('timeupdate', () => draw());

function draw() {
        ctx.clearRect(0, 0, canv.width, canv.height);
        ctx.drawImage(mypic, 0, 0, w, h);
        ctx.shadowOffsetX = 4;
        ctx.shadowOffsetY = 4;
        ctx.shadowBlur = 8;
        ctx.shadowColor = 'rgba(0,0,0,.5)';
        ctx.font = 'bold 60px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
       
        for(j = 0; j < 100; j ++) {
                ctx.fillStyle = 'hsla(' + num(0,360) + ', 100%, 50%, 0.65)';
                let r = num(20, 5), x = num(r, canv.width - r), y = num(r, canv.height - r);
                ctx.beginPath();
                ctx.arc(x, y, r, 0, Math.PI * 2);
                ctx.fill();
        }
        ctx.strokeStyle = 'hsl(' + num(0, 360) + ', 100%, ' + num(20, 80) + '%)';
        ctx.beginPath();
        ctx.strokeText('钻石    世界', canv.width / 2 + 15, canv.height / 2);
}

</script>

马黑黑 发表于 2022-8-24 09:01

实现思路：

帖子父框起帖子定位作用，其下有两个元素：画布，背景与珠子载体，和 span 标签，充当光盘。

光盘是CSS关键帧动画驱动，JS对其进行与音乐关联的控制。

热烈狂躁的珠子，以及帖子 title 文本，还有背景图片，均在画布内操作。draw() 函数封装了它们。draw() 函数在图片加载时运行一次，如果浏览器不支持音乐的自动播放，则出现一个精致画面，访问者可以点击光盘播放音乐。音乐播放的时候，对 audio 的 timeupdate 事件进行监听，并由该事件驱动 draw() 函数，动画与播放同步运行。

马黑黑 发表于 2022-8-24 09:10

细心观察会发现，珠子的颜色单纯一些，文本的颜色丰富得多。什么原因？

请比较第 45 行和第 51 行代码。它们都使用 hsl 颜色体系，珠子的颜色还加入透明度，但这不是影响变现出来的颜色丰厚程度的主要原因，虽然也会产生一定的影响。主要原因在于：珠子仅对颜色属性 h 即 hue 即色相进行随机取值，而文本颜色的设定还对第三个颜色属性即 l 即 lightness 即亮度进行随机取值。我们还可以对饱和度 即 s 进行随机取值，令颜色样式呈几何级增长 。

加林森 发表于 2022-8-24 10:09

好巧妙的构思，把光盘定位在中间，差点看调了。太漂亮了，字体也很漂亮，隐藏在中间。{:4_199:}

加林森 发表于 2022-8-24 10:11

一评分就显示光盘的定位了。真好，再刷新就全部都出来了。{:4_190:}

梦油 发表于 2022-8-24 10:47

黑黑朋友早晨好！你这钻石炫目华彩、熠熠生辉啊，太美啦！

红影 发表于 2022-8-24 11:23

流光溢彩，这么多熠熠生辉的珠子。变色的文字也好美。欣赏黑黑美帖{:4_187:}

马黑黑 发表于 2022-8-24 12:18

红影 发表于 2022-8-24 11:23
流光溢彩，这么多熠熠生辉的珠子。变色的文字也好美。欣赏黑黑美帖

群魔乱舞而已{:4_170:}

马黑黑 发表于 2022-8-24 12:19

梦油 发表于 2022-8-24 10:47
黑黑朋友早晨好！你这钻石炫目华彩、熠熠生辉啊，太美啦！

喜欢哪一颗放书桌上

马黑黑 发表于 2022-8-24 12:20

加林森 发表于 2022-8-24 10:09
好巧妙的构思，把光盘定位在中间，差点看调了。太漂亮了，字体也很漂亮，隐藏在中间。

光盘在众多闪烁的珠子合围下的确一开始不好找

马黑黑 发表于 2022-8-24 12:20

加林森 发表于 2022-8-24 10:11
一评分就显示光盘的定位了。真好，再刷新就全部都出来了。

没有珠子的干扰时光盘容易找到

加林森 发表于 2022-8-24 13:16

马黑黑 发表于 2022-8-24 12:20
没有珠子的干扰时光盘容易找到

是的。我一打开就看见光盘了。

加林森 发表于 2022-8-24 13:16

马黑黑 发表于 2022-8-24 12:20
光盘在众多闪烁的珠子合围下的确一开始不好找

嗯嗯，我眼睛好。一下就发现了。

梦油 发表于 2022-8-24 15:11

马黑黑 发表于 2022-8-24 12:19
喜欢哪一颗放书桌上

太美了，太美了！

马黑黑 发表于 2022-8-24 17:41

梦油 发表于 2022-8-24 15:11
太美了，太美了！

算式过得去

马黑黑 发表于 2022-8-24 17:41

加林森 发表于 2022-8-24 13:16
嗯嗯，我眼睛好。一下就发现了。

厉害

马黑黑 发表于 2022-8-24 17:41

加林森 发表于 2022-8-24 13:16
是的。我一打开就看见光盘了。

队长眼神好

加林森 发表于 2022-8-24 17:49

马黑黑 发表于 2022-8-24 17:41
厉害

这个可能是有美术功底吧。

加林森 发表于 2022-8-24 17:49

马黑黑 发表于 2022-8-24 17:41
队长眼神好

敏感的。

查看完整版本: 钻石世界