加林森 发表于 2022-8-8 14:37

《铁血丹心》（学习老黑“繁华梦”制作）

本帖最后由 加林森 于 2022-8-9 20:14 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; width: 100%; height: 100%; background: #000; }
#bgImg { display: none; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: snow; text-shadow: 2px 2px 4px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <canvas id="canv"></canvas>
      <img id="bgImg" src="https://s1.ax1x.com/2022/08/09/v1NFHI.jpg" alt="" />
      <span id="disc"></span>
      <span id="tit">铁血丹心 | 琵琶·朱飞霏</span>
</div>

<script>
let ctx = canv.getContext('2d');
let w = papa.clientWidth, h = papa.clientHeight, aud = new Audio();
let dotAr = Array.from({length: 250}, (item,key) => { return { x: Math.random()*w, y: Math.random()*h, r: Math.random()*5, }; });

canv.width = w;
canv.height = h;
aud.src = 'https://music.163.com/song/media/outer/url?id=1477837031.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');

function draw() {
      ctx.clearRect(0,0,w,h);
      ctx.drawImage(bgImg, 0, 0, w, h);
      ctx.beginPath();
      for(item of dotAr) {
                ctx.fillStyle = 'rgba(255,255,255,.35)';
                ctx.moveTo(item.x, item.y);
                ctx.arc(item.x, item.y, item.r, 0, Math.PI * 2);
      }
      ctx.fill();
      update();
}

function update() {
      for (key in dotAr) {
                dotAr.y -= (7 - dotAr.r) / 10;
                if(dotAr.y < 0) {
                        dotAr = {
                              x: Math.random() * w,
                              y: h,
                              r: Math.random()*5,
                        }
                }
      }
}

draw();
setInterval(draw,10);
</script>

加林森 发表于 2022-8-8 14:38

@马黑黑

加林森 发表于 2022-8-8 14:48

制作过程中的一点感受：我先制作的是100个小球，感觉少了，就再增加到 150个，现在还是定为200个感觉才好。看着满天的球球向上飞去，真好！谢谢老黑了！

樵歌 发表于 2022-8-8 16:46

好熟悉的哥{:4_173:}转眼屏黑鸟{:4_334:}

加林森 发表于 2022-8-8 16:55

樵歌 发表于 2022-8-8 16:46
好熟悉的哥转眼屏黑鸟

这首音乐是射雕英雄传的主题曲。

马黑黑 发表于 2022-8-8 19:11

加林森 发表于 2022-8-8 14:48
制作过程中的一点感受：我先制作的是100个小球，感觉少了，就再增加到 150个，现在还是定为200个感觉才好。 ...

其实最好是250{:4_170:}

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

樵歌 发表于 2022-8-8 16:46
好熟悉的哥转眼屏黑鸟

这啥黑话呢

红影 发表于 2022-8-8 19:57

队长真快，这么快就做出了黑黑的新效果{:4_187:}

加林森 发表于 2022-8-8 20:02

马黑黑 发表于 2022-8-8 19:11
其实最好是250

250不好听{:5_158:}

加林森 发表于 2022-8-8 20:03

红影 发表于 2022-8-8 19:57
队长真快，这么快就做出了黑黑的新效果

就是玩玩嘛。{:5_117:}

马黑黑 发表于 2022-8-8 20:28

加林森 发表于 2022-8-8 20:02
250不好听

但挺好的，不信你试试

加林森 发表于 2022-8-8 20:47

马黑黑 发表于 2022-8-8 20:28
但挺好的，不信你试试

我制作了三张图片，都不太满意的。都不是高清的。

加林森 发表于 2022-8-8 20:55

马黑黑 发表于 2022-8-8 20:28
但挺好的，不信你试试

现在是250颗了 。

马黑黑 发表于 2022-8-8 21:50

加林森 发表于 2022-8-8 20:55
现在是250颗了 。

感觉如何

马黑黑 发表于 2022-8-8 21:51

加林森 发表于 2022-8-8 20:47
我制作了三张图片，都不太满意的。都不是高清的。

首先，找的原图必须是高清的

加林森 发表于 2022-8-8 22:42

马黑黑 发表于 2022-8-8 21:50
感觉如何

好像更厉害了。

加林森 发表于 2022-8-8 22:44

马黑黑 发表于 2022-8-8 21:51
首先，找的原图必须是高清的

嗯嗯。我第一张是最好的，但是没有画面，只有机械式的就没有用。

红影 发表于 2022-8-8 23:01

加林森 发表于 2022-8-8 20:03
就是玩玩嘛。

队长勤奋{:4_187:}

加林森 发表于 2022-8-8 23:29

红影 发表于 2022-8-8 23:01
队长勤奋

谢谢啦。我就喜欢玩新的。红影快去休息了。

樵歌 发表于 2022-8-9 11:04

加林森 发表于 2022-8-8 16:55
这首音乐是射雕英雄传的主题曲。

听了无数次，一直喜欢那个伤感的味道
页: [1] 2 3
查看完整版本: 《铁血丹心》（学习老黑“繁华梦”制作）