论坛 › 现代文学 › 【末伏消暑】第五天 虫（桂殿秋）

红影 发表于 2022-8-19 10:39

【末伏消暑】第五天 虫（桂殿秋）

<style>
#papa {left: -242px;top:120px; width: 1080px; height: 640px; background: #eee url('https://pic.imgdb.cn/item/62feedeb16f2c2beb1d1d2ca.jpg') no-repeat; box-shadow: 2px 2px 2px #333; border-radius: 20px; display:grid; place-items: center; position: relative; }
#canv { position: absolute; right:10px;top:280px; }
#disc { position: absolute; width: 40px; height: 40px; left: 20px; top: 60px; 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; }
#lrcbox { position: absolute; left: 70px; top: 60px;font: bold 22px / 40px sans-serif; color: #051E84; text-shadow: 2px 2px 4px #222; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<div style="position: absolute; right:20px; top: 0px; width:180px;">
                <img alt="" src="https://pic.imgdb.cn/item/62feee2816f2c2beb1d1f8bf.gif"/>
                </div>
<div style="position: absolute; left:80px; bottom: 0px; width:185px;">
                <img alt="" src="https://pic.imgdb.cn/item/62fef60216f2c2beb1d7eeed.png"/>
                </div>
      <canvas id="canv" width="400" height="380"></canvas>
      <span id="disc"></span>
      <span id="lrcbox">秋风过耳</span>
</div><br><br><br><br><br><br>

<script>
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let txtAr = ['【末伏消暑】桂殿秋·思','　','　　檐滴雨，枕闻虫。', '　　更深不寐院灯红。', '　　伊人远去无音讯，', '　　满地秋声眷念浓。'];
let lineNow = 0, lineHeight = 40, charIdx = 0;


(function drawText() {
      ctx.clearRect(0, 0, w, h);
      ctx.fillStyle ='#5BDAFA';
      ctx.shadowOffsetX = 2;
      ctx.shadowOffsetY = 2;
      ctx.shadowBlur = 4;
      ctx.shadowColor = '#0022AA';
      ctx.font = 'bold 26px snas-serif';
      for(let k = 0; k < lineNow; k ++) {
                ctx.fillText(txtAr, 20, lineHeight * k + lineHeight);
      }
      let txtstr = txtAr.substring(0, charIdx);
      ctx.fillText(txtstr, 20, lineHeight * lineNow + lineHeight);
      charIdx ++;
      if(charIdx > txtAr.length) {
                lineNow += 1;
                charIdx = 0;
      }
      if(lineNow > txtAr.length - 1) {
                setTimeout(function() {
                lineNow = 0;
                drawText();
                }, 10000);
      } else {
                setTimeout(drawText, 500);
      }
})();
let aud = new Audio();      
aud.src = 'https://music.163.com/song/media/outer/url?id=304907.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');
</script>

红影 发表于 2022-8-19 10:41

桂殿秋

檐滴雨，枕闻虫。更深不寐烛摇红。伊人远去无音讯，满院秋声眷念浓。

红影 发表于 2022-8-19 10:51

黑黑，能不能让逐字输入全部完成后，多等一会，然后再从头开始。觉得全部输完后太快就重新开始了，最好输完能多停留一会。我试过拉长时间，但那个是整个输入的时间。@马黑黑 {:4_204:}

樵歌 发表于 2022-8-19 11:05

词漂亮，婉约柔情。加上马术音乐的加持，更引人入胜了。{:4_187:}

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

红影 发表于 2022-8-19 10:51
黑黑，能不能让逐字输入全部完成后，多等一会，然后再从头开始。觉得全部输完后太快就重新开始了，最好输完 ...

这个是有思路的，需要加一个机制，等有空再弄弄。

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

红影 发表于 2022-8-19 10:51
黑黑，能不能让逐字输入全部完成后，多等一会，然后再从头开始。觉得全部输完后太快就重新开始了，最好输完 ...

需要改装一下 drawText 函数，用以下这个替代原来的：

(function drawText() {
        ctx.clearRect(0, 0, w, h);
        ctx.strokeStyle = linear;
        ctx.font = 'bold 50px snas-serif';
        for(let k = 0; k < lineNow; k ++) {
                ctx.strokeText(txtAr, 20, lineHeight * k + lineHeight);
        }
        let txtstr = txtAr.substring(0, charIdx);
        ctx.strokeText(txtstr, 20, lineHeight * lineNow + lineHeight);
        charIdx ++;
        if(charIdx > txtAr.length) {
                lineNow += 1;
                charIdx = 0;
        }
        if(lineNow > txtAr.length - 1) {
                setTimeout(function() {
                lineNow = 0;
                drawText();
                }, 10000);
        } else {
                setTimeout(drawText, 500);
        }
})();


暗红色的代码是变动的部分。原理是，加入一个分支，判断：当当前行大于行数组减1，则运行一个延时定时器，该定时器设定为10秒（10000毫秒），10秒一到，则令 lineNum （当前行）恢复到0，且运行本函数；否则，当当前行没有超过总行数边界，则运行正常的定时器，即原来设计的那个定时器，每 500 毫秒运行一次本函数。

需要修改延时定时器间隔时间，修改 10000 这个数即可。

梦油 发表于 2022-8-19 14:53

哎呀呀！这么好的作品，可惜，俺没分了。

                        {:4_201:}

红影 发表于 2022-8-19 18:32

樵歌 发表于 2022-8-19 11:05
词漂亮，婉约柔情。加上马术音乐的加持，更引人入胜了。

二楼的是刚写完的样子，后来觉得对应图图，还是换几个字的好，就微调了一下{:4_173:}

红影 发表于 2022-8-19 18:34

马黑黑 发表于 2022-8-19 12:53
需要改装一下 drawText 函数，用以下这个替代原来的：

(function drawText() {


奇怪，我把紫红的加进去后，在本地测试，逐字输出效果不出来了，甚至连音乐都没了。照理改这个应该和音乐无关的啊。

红影 发表于 2022-8-19 18:34

马黑黑 发表于 2022-8-19 12:19
这个是有思路的，需要加一个机制，等有空再弄弄。

黑黑厉害，各种功能都能实现{:4_199:}

红影 发表于 2022-8-19 18:35

梦油 发表于 2022-8-19 14:53
哎呀呀！这么好的作品，可惜，俺没分了。

没事，有梦油的临帖就很开心呢{:4_187:}

马黑黑 发表于 2022-8-19 18:48

红影 发表于 2022-8-19 18:34
黑黑厉害，各种功能都能实现

简单的可以的

马黑黑 发表于 2022-8-19 18:51

红影 发表于 2022-8-19 18:34
奇怪，我把紫红的加进去后，在本地测试，逐字输出效果不出来了，甚至连音乐都没了。照理改这个应该和音乐 ...

有关。只要有语法错误，JS的运行就会受整体性影响。必须搞清楚语法错误在哪，本地测试按F12在控制台查看，它会提示是哪一行出错，改它

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

马黑黑 发表于 2022-8-19 18:51
有关。只要有语法错误，JS的运行就会受整体性影响。必须搞清楚语法错误在哪，本地测试按F12在控制台查看 ...

哦，我去试试{:4_187:}

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

马黑黑 发表于 2022-8-19 18:48
简单的可以的

反正在我的感觉里，你无所不能{:4_187:}

绿叶清舟 发表于 2022-8-19 20:01

制作漂亮啊，这文字效果真好

红影 发表于 2022-8-19 20:03

马黑黑 发表于 2022-8-19 18:51
有关。只要有语法错误，JS的运行就会受整体性影响。必须搞清楚语法错误在哪，本地测试按F12在控制台查看 ...

现在可以了，少了个大括号。呵呵，我已经改到主贴里去了，现在不会那么快地收掉整首词了{:4_187:}

梦油 发表于 2022-8-19 20:03

红影 发表于 2022-8-19 18:35
没事，有梦油的临帖就很开心呢

俺来学习啊。

红影 发表于 2022-8-19 20:03

绿叶清舟 发表于 2022-8-19 20:01
制作漂亮啊，这文字效果真好

是黑黑的代码啊，我直接套用了过来{:4_173:}

绿叶清舟 发表于 2022-8-19 20:14

红影 发表于 2022-8-19 20:03
是黑黑的代码啊，我直接套用了过来

一天出个新效果啊

查看完整版本: 【末伏消暑】第五天 虫（桂殿秋）