钻石世界

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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 进行随机取值，令颜色样式呈几何级增长。