加林森 发表于 2022-8-21 11:26

《高山流水》- 候作吾

本帖最后由 加林森 于 2022-8-21 12:54 编辑 <br /><br /><style>
#papa {left: -212px; top:120px; width: 1024px; height: 683px; background: #eee url('https://pic.imgdb.cn/item/6301987416f2c2beb12f5122.jpg') no-repeat; box-shadow: 2px 2px 2px #333; border-radius: 20px; display:grid; place-items: center; position: relative; }
#canv { position: absolute; left: 320px; top: 400px; }
#disc { position: absolute; width: 40px; height: 40px; left: 20px; bottom: 40px; 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: 60px; bottom: 40px;font: bold 22px / 40px sans-serif; color: #f0fcff; text-shadow: 2px 2px 4px #222;opacity: .45; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<div style="position: absolute; left:210px; top: 0px; width:480px; opacity: .15;">
                <img alt="" src="https://pic.rmb.bdstatic.com/bjh/71b38db88a9c6f65411ad87a365223e7.gif"/>
                </div>
      <canvas id="canv" width="320" height="160"></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 step = 0.3, yy = h;
let txtAr = [
      '清·袁于令 ',

      '《西樓記-病晤》 ',

      '清商繞畫梁，',

      '一聲一字，',　
　　　　      
      '万種悠揚，',

      '高山流水相傾賞。',
];

(function moveText() {
      ctx.clearRect(0, 0, w, h);
      ctx.fillStyle = '#FFFFFF';
      ctx.font = 'bold 18px 黑体';
      ctx.letterSpacing = '3px';
      ctx.shadowOffsetX = 3;
      ctx.shadowOffsetY = 3;
      ctx.shadowBlur = 5;
      ctx.shadowColor = '#222';
      let hy = yy;
      for(j = 0; j< txtAr.length; j ++) {
                hy +=18;
                ctx.fillText(txtAr, 10, hy);
      }
      yy -= step; //yy变量自增
      if (yy <= -60) yy = h;
      requestAnimationFrame(moveText);
})();
let aud = new Audio();      
aud.src = 'https://music.163.com/song/media/outer/url?id=5280822.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-21 11:26

@马黑黑

马黑黑 发表于 2022-8-21 11:37

诗情画意，琴声悠扬。欣赏队长精美制作。

加林森 发表于 2022-8-21 11:40

马黑黑 发表于 2022-8-21 11:37
诗情画意，琴声悠扬。欣赏队长精美制作。

谢谢老黑。我怎么感觉字体太挤了呢？

马黑黑 发表于 2022-8-21 12:04

加林森 发表于 2022-8-21 11:40
谢谢老黑。我怎么感觉字体太挤了呢？

因为你使用了较小的字号，需要拉开字间距。在

ctx.font = 'bold 18px 黑体';

之下插入一行：

ctx.letterSpacing = '3px';

这将是的字间距是 3 像素，具体硬要多少自己设定

加林森 发表于 2022-8-21 12:08

马黑黑 发表于 2022-8-21 12:04
因为你使用了较小的字号，需要拉开字间距。在

ctx.font = 'bold 18px 黑体';


好的，我去修改。

红影 发表于 2022-8-21 12:31

队长也可以把那0.1修改一下，我当时是那块地方太小，所以弄得慢了点，队长的图图这么大地方，可以把高度放大点，速度也可以快的{:4_187:}

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

加林森 发表于 2022-8-21 12:08
好的，我去修改。

挺好

加林森 发表于 2022-8-21 12:56

本帖最后由 加林森 于 2022-8-21 15:00 编辑

红影 发表于 2022-8-21 12:31
队长也可以把那0.1修改一下，我当时是那块地方太小，所以弄得慢了点，队长的图图这么大地方，可以把高度放 ...
哦。

加林森 发表于 2022-8-21 12:57

马黑黑 发表于 2022-8-21 12:51
挺好

已经修改完毕。

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

加林森 发表于 2022-8-21 12:57
已经修改完毕。

看到效果了

加林森 发表于 2022-8-21 14:59

马黑黑 发表于 2022-8-21 13:50
看到效果了

嗯嗯。

醉美水芙蓉 发表于 2022-8-21 20:06

加林森 发表于 2022-8-21 20:12

醉美水芙蓉 发表于 2022-8-21 20:06
队长厉害，这个做得挺好的！意境很美！

嗯嗯。是的。

樵歌 发表于 2022-8-21 21:12

好意境！{:4_199:}

青青子衿 发表于 2022-8-21 21:48

欣赏加林森作品，清雅幽静，飞瀑之下，有清音

青青子衿 发表于 2022-8-21 21:49

记得小龙女，曾这样抚琴呢

加林森 发表于 2022-8-21 21:50

樵歌 发表于 2022-8-21 21:12
好意境！

老兄喜欢就好！

加林森 发表于 2022-8-21 21:50

青青子衿 发表于 2022-8-21 21:48
欣赏加林森作品，清雅幽静，飞瀑之下，有清音

谢谢青青支持！

青青子衿 发表于 2022-8-21 21:51

我觉得，加林森吟诵诗文，会更融入画面
页: [1] 2
查看完整版本: 《高山流水》- 候作吾