【末伏消暑】第五天【虫】虫儿飞
<style>#papa { left: -344px;top:150px; width: 1280px; height: 738px; display: grid; place-items: center; background: gray url('https://pic.imgdb.cn/item/62fe13fd16f2c2beb155857e.jpg') no-repeat center/cover; box-shadow: 3px 3px 26px #000; position: relative;overflow: hidden; }
#canv { position: absolute; border: 0px solid; }
</style>
<div id="papa">
<canvas id="canv" width="800" height="300"></canvas>
</div>
<script>
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let txtAr = ['虫儿飞是电影风云雄霸天下的插曲', '因歌曲悠扬的旋律类似童谣的风格', '配上浪漫的歌词广受大众的喜欢。。'];
let lineNow = 0, lineHeight = 60, charIdx = 0; //行、行高（建议略大于字号）、字符索引
let linear = ctx.createLinearGradient(0, 0, w, h);
linear.addColorStop(0, 'red');
linear.addColorStop(0.3, 'olive');
linear.addColorStop(0.7, 'darkgreen');
linear.addColorStop(1, 'orange');
(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) lineNow = 0;
setTimeout(drawText, 500);
})();
</script>
<br>
<audio style="width:0px;height:00px;" controls="controls" autoplay="autoplay" loop="loop" src="https://music.163.com/song/media/outer/url?id=1293904905.mp3" type="audio/mpeg"></audio>
<br><br><br><br><br><br><br><br><br> 今天我超前完成作业，亲爱的进来表扬一下@红影
{:4_172:} @马黑黑
黑黑我开始想把这个打字边框去了，后来发现有机关的，就不捣鼓了，感觉留着也是蛮有立体感的{:4_170:} 小辣椒 发表于 2022-8-18 20:42
@马黑黑
黑黑我开始想把这个打字边框去了，后来发现有机关的，就不捣鼓了，感觉留着也是蛮有立体感的{: ...
没有机关。去掉边框在CSS里操作：把 #canv {} 里的 border: 1px solid; 删掉即可。 马黑黑 发表于 2022-8-18 20:50
没有机关。去掉边框在CSS里操作：把 #canv {} 里的 border: 1px solid; 删掉即可。
我改了0.1还是有 小辣椒朋友遴选的曲目和字幕的出现，以及字幕的颜色等都会受到小朋友的欢迎。 马黑黑 发表于 2022-8-18 20:50
没有机关。去掉边框在CSS里操作：把 #canv {} 里的 border: 1px solid; 删掉即可。
黑黑，你看看有边框好还是没有边框好？我心里想是一个暗的坎线--就是淡淡的一个框，没有成功 小辣椒 发表于 2022-8-18 20:40
今天我超前完成作业，亲爱的进来表扬一下@红影
亲爱的厉害，这么快就把那个分行逐字展示做出来了，还顺便完成了作业，聪明{:4_187:} 这个很童趣，好看又好听{:4_199:} 梦油 发表于 2022-8-18 20:55
小辣椒朋友遴选的曲目和字幕的出现，以及字幕的颜色等都会受到小朋友的欢迎。
谢谢梦油欣赏和支持{:4_187:} 红影 发表于 2022-8-18 20:58
亲爱的厉害，这么快就把那个分行逐字展示做出来了，还顺便完成了作业，聪明
现在完成作业为主了，昨天晚上下了去做的。 红影 发表于 2022-8-18 20:58
这个很童趣，好看又好听
还有5个作业完成后，全部作业交齐了{:4_170:} 小辣椒 发表于 2022-8-18 20:55
黑黑，你看看有边框好还是没有边框好？我心里想是一个暗的坎线--就是淡淡的一个框，没有成功
没有框好。淡淡的框吗，可以通过CSS边框透明色处理，#canv {] 里：
border: 1px solid rgba(0,0,0, .25);
.25 就是 0.25，数值越小透明度越大，边框就会越淡 马黑黑 发表于 2022-8-18 21:56
没有框好。淡淡的框吗，可以通过CSS边框透明色处理，#canv {] 里：
border: 1px solid rgba(0,0,0, .2 ...
好的，我想淡淡的框，这样会有点立体感 醉美水芙蓉 发表于 2022-8-18 21:05
辣椒美女厉害！边框去了好看！
谢谢水芙蓉欣赏{:4_187:} 小辣椒 发表于 2022-8-18 20:53
我改了0.1还是有
CSS里，0.1px是无效的，被视为 1px。可以用alpha通道将边框颜色设置淡一些 小辣椒 发表于 2022-8-18 21:59
好的，我想淡淡的框，这样会有点立体感
你去试试 马黑黑 发表于 2022-8-18 22:00
CSS里，0.1px是无效的，被视为 1px。可以用alpha通道将边框颜色设置淡一些
黑黑。好奇怪，现在发现和刚才的效果不一样了，我没有修改啊，作业完成再看看这里变了 小辣椒 发表于 2022-8-18 21:00
现在完成作业为主了，昨天晚上下了去做的。
不过，没几天伏天就结束了呢{:4_173:}