【黑师代码】凝望(学习黑师《做一个canvas时钟（系列教程）》贴子使用实例）
本帖最后由 南无月 于 2024-3-30 22:25 编辑 <br /><br /><style>#papa {
margin: 130px 0 10px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://pic.imgdb.cn/item/660289449f345e8d03eed048.webp') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
z-index: 1;
}
#vid {
position: absolute;
width: 100%;
height: 110%;
opacity: .10;
top:-80px;
object-fit: cover;
mix-blend-mode: screen;
pointer-events: none;
z-index: 12;
opacity: .28;
}
#mypic {
position: absolute;
width: 60px;
height: 60px;
left:480px;
top:540px;
mix-blend-mode: hard-light;
cursor: pointer;
transition: filter 1s;
animation: rot 6s infinite linear var(--state);
z-index: 10;
}
#mypic:hover {
filter: invert(100%) drop-shadow(4px 4px 20px snow);
}
#canv { position: absolute; width="300";height="300";top:420px;left:360px;z-index: 5;opacity: .58;}
@keyframes moving {
from { transform: translate(0,0) rotate(var(--deg)); opacity: 0; }
to { transform: translate(var(--xx),var(--yy)) rotate(var(--deg)); opacity: 1; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/02/18/5b52d56cc6aff.mp4" autoplay loop muted></video>
<img id="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" title="暂停/播放" />
<canvas id="canv" width="300" height="300"></canvas>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2040200174" autoplay loop></audio>
</div>
<script>
let cTimer = null;
/* 获取画笔 */
let ctx = canv.getContext('2d');
/* 函数 ：绘制矩形（指针） */
let draw_rect = (x, y, w, h, rad, color) => {
ctx.save();
ctx.fillStyle = color;
ctx.translate(150,150);
ctx.rotate(rad);
ctx.fillRect(x,y,w,h);
ctx.restore();
};
/* 函数 ：绘制圆（环） */
let draw_circle = (x,y,r,lw,color1,color2) => {
ctx.save();
ctx.fillStyle = color1;
ctx.strokeStyle = color2;
ctx.lineWidth = lw;
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI * 2);
ctx.fill();
ctx.stroke();
ctx.restore();
};
/* 函数 ：绘制文本 */
let draw_text = (txt,x,y,color,fontsize=18,b="bold") => {
ctx.save();
ctx.translate(150,150);
ctx.font = `${b} ${fontsize}px sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline="middle";
ctx.fillStyle = color;
ctx.fillText(txt,x,y);
ctx.restore();
};
let render = () => {
/* 获取时间 */
let now = new Date();
let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
msec = now.getMilliseconds();
let hDeg = hr * 30 + (min * 6 / 12),
mDeg = min * 6 + (sec * 6 / 60),
sDeg = sec * 6 + (msec * 0.36 / 1000);
ctx.clearRect(0,0,300,300); /* 每一次绘制前都衔擦除画布 */
draw_circle(150,150,140,10,'AliceBlue','SteelBlue'); /* 钟壳和钟面 */
/* 钟点 */
for(let i = 0; i < 12; i ++) {
let radian = Math.PI/180*(i*30-60);
let x = 115 * Math.cos(radian), y = 115 * Math.sin(radian);
draw_text(i+1, x, y, 'DimGray');
}
/* 刻度 */
for(let i = 0; i < 60; i ++) {
let radian = Math.PI/180*(i*6);
let x = 150 + 130 * Math.cos(radian), y = 150 + 130 * Math.sin(radian);
draw_circle(x,y,1,2,'gray','gray');
}
/* 按一定次序绘制时钟各个元素 ：确保指针、指针扣不会被遮挡 */
draw_text(`${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`,0,-50,' DimGray', 15, 'normal'); /* 日期 */
draw_text(`星期${'日一二三四五六'.substr(now.getDay(),1)}`,0,-25,'DimGray', 15, 'normal'); /* 星期 */
draw_text('HUACHAO',0,60,'DimGray'); /* Logo */
draw_rect(0, -3, 90, 6, (hDeg - 90) * Math.PI/180, 'CadetBlue'); /* 时针 */
draw_rect(0, -2, 100, 4, (mDeg - 90) * Math.PI/180, 'CadetBlue'); /* 分针 */
draw_rect(0, -1, 120, 2, (sDeg - 90) * Math.PI/180, 'CadetBlue'); /* 秒针 */
draw_circle(150,150,6,6,'white','CadetBlue'); /* 指针扣 */
requestAnimationFrame(render);
};
render();
let mState = () => {
aud.paused
? (papa.style.setProperty('--state','paused'), vid.pause())
: (papa.style.setProperty('--state','running'),vid.play());
draw();
};
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> @马黑黑 老师瞧一瞧，交份时钟作业。。{:4_170:} 两个字：唯美 马黑黑 发表于 2024-3-26 18:21
两个字：唯美
应该唯美，同意唯美。
这时钟我看着一天一点画出来的。。
全是老师教的好。。{:4_199:} 进来就看见月月的漂亮制作{:4_199:} 黑黑的时钟效果{:4_178:}
漂亮 小辣椒 发表于 2024-3-26 20:27
进来就看见月月的漂亮制作
小辣椒来啦。。看到你的回复真是开心呀。。{:4_204:} 小辣椒 发表于 2024-3-26 20:27
黑黑的时钟效果
漂亮
今天刚完工的画布时钟，觉得挺好看就整个背景放上去 南无月 发表于 2024-3-26 20:45
小辣椒来啦。。看到你的回复真是开心呀。。
月月制作漂亮的，每个帖都很有亮点{:4_199:} 南无月 发表于 2024-3-26 20:45
今天刚完工的画布时钟，觉得挺好看就整个背景放上去
图图漂亮，配上时钟就更加出彩了 好漂亮的制作{:4_204:} 小辣椒 发表于 2024-3-26 20:51
月月制作漂亮的，每个帖都很有亮点
小辣椒你太会夸啦。。开心{:4_187:} 小辣椒 发表于 2024-3-26 20:52
图图漂亮，配上时钟就更加出彩了
时钟好看，关键 是好准啊。。@马黑黑 这也是个决窍吧。 绿叶清舟 发表于 2024-3-26 20:55
好漂亮的制作
{:4_187:}清舟来回复啦，开心呀。。 南无月 发表于 2024-3-26 21:01
清舟来回复啦，开心呀。。
这个板块没怎么来的了，原来都在这玩啊 漂亮，欣赏学习哈{:4_204:} 月儿聪明，这么快就做出来了，而且时钟还做了颜色调整，更觉得美妙了。
给月儿点大大的赞{:4_199:} 完美！ 制作非常棒！ 音乐真好听空灵柔美凝望是人间最形象、最丰富、最真实的风景。。
{:4_204:}{:4_178:}{:4_199:} 大猫咪 发表于 2024-3-26 22:06
制作非常棒！ 音乐真好听空灵柔美凝望是人间最形象、最丰富、最真实的风景。。
{ ...
感谢大猫咪支持鼓励。{:4_190:}