使用js和canvas实现时钟效果
程序员文章站
2022-07-02 14:57:30
使用js和canvas写一个时钟，供大家参考，具体内容如下`
使用js和canvas写一个时钟，供大家参考，具体内容如下
<!doctype html>`
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body>
<canvas id='canvas' width='600' height='600' style="border: 1px solid red;"></canvas>
<script>
/** @type {htmlcanvaselement} */
let canvas = document.queryselector("#canvas");
let ctx = canvas.getcontext("2d");
let deg = math.pi / 180;
let hourr = 100;
let minutesr = 135;
let secondsr = 170;
setinterval(function () {
canvas.width = canvas.width;
ctx.arc(300, 300, 200, 0, math.pi * 2)
ctx.fillstyle = 'rgba(10,100,30,0.2)'
ctx.strokestyle = 'red'
//获取当前时间
let dt = new date()
let hour = dt.gethours()
let minutes = dt.getminutes()
let seconds = dt.getseconds()
//时钟
ctx.moveto(300, 300);
let xx = hourr * (math.sin(hour * 30 * deg))
let yy = hourr * (math.cos(hour * 30 * deg))
ctx.lineto((300 + xx), (300 - yy))
//分钟和秒钟
function move(time, r) {
ctx.moveto(300, 300);
xx = r * (math.sin(time * 6 * deg))
yy = r * (math.cos(time * 6 * deg))
ctx.lineto((300 + xx), (300 - yy))
}
//小时指针
for (let m = 0; m < 12; m++) {
let xx = 190 * (math.sin(m * 30 * deg))
let yy = 190 * (math.cos(m * 30 * deg))
let xx1 = 200 * (math.sin(m * 30 * deg))
let yy1 = 200 * (math.cos(m * 30 * deg))
ctx.moveto((300 + xx), (300 - yy));
ctx.lineto((300 + xx1), (300 - yy1))
}
move(seconds, secondsr)
move(minutes, minutesr)
ctx.fill()
ctx.stroke()
}, 1000)
</script>
</body>
</html>
更多javascript时钟特效点击查看：javascript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： 大众美食经典菜品有哪些