加林森 发表于 2022-8-13 10:54

【中伏消暑】第十九天 帆：《今夜无法入眠》- 帆布小镇（Canvas Townlet）


<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/v10Jc8.jpg" alt="" />
      <span id="disc"></span>
      <span id="tit">今夜无法入眠| 帆布小镇（Canvas Townlet）</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=1428270358.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-13 10:56

歌词：

月亮不懂你的眼眸
山河不懂你的哀愁
我只想和你在一起
天空掠过你的心情
我只想做你的唯一
我时时刻刻在意你
走，向前向左向右走
一直牵着你的手
穿过这整个夜空
就，让我敲碎这白昼
哭着笑着也冲动
夜幕降临不逃走
一起走过一场大雨
我把景色留在心底
你千万不要再忘记
原来你早就在这里
一直等待我的回应
你和我的爱意继续
走，向前向左向右走
一直牵着你的手
穿过这整个夜空
就，让我敲碎这白昼
哭着笑着也冲动
夜幕降临不逃走

红影 发表于 2022-8-13 13:06

这个场景选得挺好，上升的小球很烘托气氛{:4_204:}

加林森 发表于 2022-8-13 13:18

红影 发表于 2022-8-13 13:06
这个场景选得挺好，上升的小球很烘托气氛

谢谢啦。

梦油 发表于 2022-8-13 14:28

老林下午好！徐徐上升的小气泡为整个画面增添了生气。

红影 发表于 2022-8-13 14:56

加林森 发表于 2022-8-13 13:18
谢谢啦。

队长会动脑筋，这个帖子氛围特别好{:4_187:}

小辣椒 发表于 2022-8-13 15:08

帆布小镇，队长也是搜索这个字的{:4_178:}

加林森 发表于 2022-8-13 15:10

梦油 发表于 2022-8-13 14:28
老林下午好！徐徐上升的小气泡为整个画面增添了生气。

老梦下午好。是啊。

加林森 发表于 2022-8-13 15:11

红影 发表于 2022-8-13 14:56
队长会动脑筋，这个帖子氛围特别好

嗯嗯。

加林森 发表于 2022-8-13 15:11

小辣椒 发表于 2022-8-13 15:08
帆布小镇，队长也是搜索这个字的

是啊。很方便的。{:4_189:}

梦油 发表于 2022-8-13 16:09

加林森 发表于 2022-8-13 15:10
老梦下午好。是啊。

老林下午好！你的悟性真高，学的也真快。

加林森 发表于 2022-8-13 17:09

梦油 发表于 2022-8-13 16:09
老林下午好！你的悟性真高，学的也真快。

一般一般。

樵歌 发表于 2022-8-13 18:01

制作精采热闹{:4_199:}

加林森 发表于 2022-8-13 18:12

樵歌 发表于 2022-8-13 18:01
制作精采热闹

老兄傍晚好！

樵歌 发表于 2022-8-13 19:08

加林森 发表于 2022-8-13 18:12
老兄傍晚好！

晚上好{:4_176:}

加林森 发表于 2022-8-13 20:05

樵歌 发表于 2022-8-13 19:08
晚上好

晚上好！{:4_176:}快去水区收礼。

樵歌 发表于 2022-8-14 17:04

加林森 发表于 2022-8-13 20:05
晚上好！快去水区收礼。

是小辣椒那吗？
页: [1]
查看完整版本: 【中伏消暑】第十九天 帆：《今夜无法入眠》- 帆布小镇（Canvas Townlet）