利用canvas绘制时钟的一个小demo
<!--* @Author: 164591357@ 164591357@* @Date: -08-06 11:04:07* @LastEditors: 164591357@ 164591357@* @LastEditTime: -08-07 15:56:21* @FilePath: \canvas\clock-canvas.html* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: /OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>时钟</title></head><body><canvas id="canvas" width="800" height="600"></canvas><script type="text/javascript">let canvas = document.querySelector('#canvas')let cxt = canvas.getContext('2d')function renderClock () {cxt.clearRect(0, 0, 800, 600)//清除画布// 使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。cxt.save()//保留画笔之前状态// 将坐标移动到画布的中央cxt.translate(400, 300)cxt.rotate(-2 * Math.PI / 4)//旋转90度让起始角，由原来的（弧的圆形的三点钟位置是 0 度）改为12点位置cxt.save()/*** cxt.arc参数说明* x 坐标* 圆的中心的 y 坐标。* 圆的半径。* 起始角，以弧度计（弧的圆形的三点钟位置是 0 度）* 结束角，以弧度计。* 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。*/// 创建圆绘制表盘cxt.beginPath()//开始路径cxt.arc(0, 0, 200, 0, 2 * Math.PI)cxt.strokeStyle = "darkgrey"cxt.lineWidth = 10//圆的边宽cxt.stroke()//实际地绘制出路径。默认颜色是黑色。cxt.closePath()//结束路径再画刻度;不然会和圆粘在一起//分钟for (let j = 0; j < 60; j++) {cxt.rotate(Math.PI / 30)// 转6度cxt.beginPath()cxt.moveTo(180, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度cxt.lineTo(190, 0)cxt.lineWidth = '2'cxt.strokeStyle = "orangered"cxt.stroke()cxt.closePath()}cxt.restore()cxt.save()// 绘制小时刻度for (let i = 0; i < 12; i++) {cxt.rotate(Math.PI / 6)//每次旋转30度cxt.beginPath()cxt.moveTo(180, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度cxt.lineTo(200, 0)cxt.lineWidth = 8//圆的边宽cxt.strokeStyle = "darkgrey"cxt.stroke()cxt.closePath()}// 时间let time = new Date()let H = time.getHours()let M = time.getMinutes()let S = time.getSeconds()// 如果时间大于12就直接减去12 (如:当前为17点;那就是17-13=5点)H = H > 12 ? H - 12 : Hconsole.log('当前小时', H + ':' + M + ':' + S);cxt.beginPath()// 绘制秒针cxt.rotate(2 * Math.PI / 60 * S)//每秒旋转的刻度乘以秒cxt.moveTo(-30, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度cxt.lineTo(170, 0)cxt.lineWidth = 2//圆的边宽cxt.strokeStyle = "red"cxt.stroke()cxt.closePath()cxt.restore()cxt.save()// 绘制分针cxt.beginPath()cxt.rotate(2 * Math.PI / 60 * M + 2 * Math.PI / 3600 * S)//每分针一圈360为一圈,一圈有60分钟所以要除以60再乘以分钟得到旋转的角度,加上3600秒为一小时cxt.moveTo(-20, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度cxt.lineTo(140, 0)cxt.lineWidth = 4//圆的边宽cxt.strokeStyle = "darkblue"cxt.stroke()cxt.closePath()cxt.restore()cxt.save()// 绘制小时cxt.beginPath()cxt.rotate(2 * Math.PI / 12 * H + 2 * Math.PI / 60 / 12 * M + 2 * Math.PI / 12 / 60 / 60 * S)//一小时有12刻度,乘以当间小时+分钟(一圈360度/60分钟/12小时乘以当前的分钟)+秒的算法最后得到每小时走的角度cxt.moveTo(-20, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度cxt.lineTo(100, 0)cxt.lineWidth = 6//圆的边宽cxt.strokeStyle = "darkslategray"cxt.beginPath()// 指针中心的小圆cxt.arc(0, 0, 8, 0, 2 * Math.PI)cxt.fillStyle = "deepskyblue"cxt.fill()cxt.restore()cxt.restore()//恢复到初始状态}setInterval(() => {renderClock()}, 1000);</script></body></html>
