【末伏消暑】第九-十天 【早+行】商山早行
<style>
#papa { left: -214px; /*margin: auto;*/ width: 1024px; height: 640px; top: 150px; display: grid; place-items: center; background: teal url('https://pic.imgdb.cn/item/6303a6c816f2c2beb12c8a59.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 3; }
#canv { position: absolute; bottom: 200px; left: 550px; cursor: pointer; box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); -webkit-box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); }
#lrcbox { position: absolute; left: 505px; top: 100px; font: bold 40px / 50px sans-serif; color: Cornislk; text-shadow: 1px 1px 2px #694533, 10px 10px 10px rgba(0, 0, 0, .35); user-select: none; }
</style>
<div id="papa">
<canvas id="canv"></canvas>
<span id="lrcbox">商山早行</span>
</div>
<script>
let ctx = canv.getContext('2d'),
w = canv.width = 70,
h = canv.height = 50,
lines = [],
total = 10,
lineWidth = (w - 2 * total) / total,
aud = new Audio();
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/08/11/0520130429.mp3';
aud.loop = true;
aud.autoplay = true;
aud.addEventListener('timeupdate', change);
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
function Line(x1,y1,x2,y2) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
lines.push(this);
}
Line.prototype.draw = function() {
ctx.beginPath();
ctx.strokeStyle = this.color;
ctx.lineWidth = lineWidth;
ctx.moveTo(this.x1, this.y1);
ctx.lineTo(this.x2,this.y2);
ctx.stroke();
}
for(let j = 0; j < total; j ++) {
let line = new Line();
line.x1 = j * lineWidth + j*2 + lineWidth / 2 + 1;
line.y1 = h;
line.x2 = line.x1;
line.y2 = 60;
line.color = 'purple';
line.draw();
}
function change() {
ctx.clearRect(0,0,w,h);
for(let item of lines) {
item.color = '#' + Math.random().toString(16).substr(-6);
item.y2 = h - (Math.random() * h);
item.draw();
}
}
change();
</script>
<br><br><br><br><br><br><br><br><br><br> 黑黑@马黑黑
今天干脆都完成作业了，后面会少一点上来，都是手机看看了 界面简洁雅致，好美 厉害厉害，打联发啊。清新的小图图，包含了很多内容的。{:4_199:}{:4_190:} 诗句和图图意境很相合，频谱也漂亮。亲爱的厉害，提前完成消暑活动了{:4_173:} 画面简洁有意境，到底是名牌产品哈{:4_187:}
我要是套用这个模板，只换字行不？{:4_203:} 马黑黑 发表于 2022-8-23 07:08
界面简洁雅致，好美
黑黑这个播放器是手机自动播放，太好了{:4_178:} 加林森 发表于 2022-8-23 08:07
厉害厉害，打联发啊。清新的小图图，包含了很多内容的。
队长这个我是套用黑黑的，就按黒黑帖里面提示修改了播放器播音条宽度，你可以去试一下 红影 发表于 2022-8-23 09:04
诗句和图图意境很相合，频谱也漂亮。亲爱的厉害，提前完成消暑活动了
亲爱的，最近几天晚上电脑不能玩，就昨天作业赶出来了 樵歌 发表于 2022-8-23 10:53
画面简洁有意境，到底是名牌产品哈
我要是套用这个模板，只换字行不？
樵哥哥就换个图片和音乐就可以了 小辣椒 发表于 2022-8-23 15:38
队长这个我是套用黑黑的，就按黒黑帖里面提示修改了播放器播音条宽度，你可以去试一下
有时间再玩这个。我现在在学习东篱的视频呢。 小辣椒 发表于 2022-8-23 15:37
黑黑这个播放器是手机自动播放，太好了
能不能自动播放，其实完全看浏览器（包括小程序内嵌浏览器核心）的基于声音的设置 马黑黑 发表于 2022-8-23 17:27
能不能自动播放，其实完全看浏览器（包括小程序内嵌浏览器核心）的基于声音的设置
可能的，设置也是有关，H5播放器基本都是手动的 加林森 发表于 2022-8-23 15:51
有时间再玩这个。我现在在学习东篱的视频呢。
队长学习老头的视频制作，他最大的亮点是图图制作精美，所以你要图图跟上去 小辣椒 发表于 2022-8-23 19:00
可能的，设置也是有关，H5播放器基本都是手动的
我们这些播放器都是h5播放器 小辣椒 发表于 2022-8-23 19:02
队长学习老头的视频制作，他最大的亮点是图图制作精美，所以你要图图跟上去
是的。这个必须学好的。 小辣椒 发表于 2022-8-23 15:39
亲爱的，最近几天晚上电脑不能玩，就昨天作业赶出来了
亲爱的辛苦了{:4_187:} 小辣椒 发表于 2022-8-23 15:40
樵哥哥就换个图片和音乐就可以了
好的，到时遇到问题请教哈{:4_185:} 樵歌 发表于 2022-8-24 16:00
好的，到时遇到问题请教哈
樵哥哥，你就换图片，音乐你可以直接用，图片写上你的文字就可以了 小辣椒 发表于 2022-8-24 18:58
樵哥哥，你就换图片，音乐你可以直接用，图片写上你的文字就可以了
等我能上电脑就试{:4_189:}前天睡落枕了
页:
[1]