canvas + css 实现走动的钟表

前段时间无聊，就重新温习下canvas，毕竟好久没用就怕生疏。

第一步：创建画布，坐标原点移动到（600，600）

const canvas = document.createElement('canvas') as HTMLCanvasElemnt
canvas.width = 1200
canvas.height = 1200
const content = canvas.getContext('2d') as CanvasRenderingContext2D
content.translate(600, 600)

第二步：画一个半径为600的圆

//圆的半径
const R = 600
const Pi = Math.PI
content.arc(0, 0, R, 0, 2*Pi, false)
content.stock()

第三步：循环添加线、数字，并最终获得钟表图片地址

let radius = 0
while(radius < 360){
    const startX = R * Math.cos(radius * 2 * Pi / 360)
    const startY = R * Math.sin(radius * 2 * Pi / 360)
    //获得线段结束点的坐标
    content linePosition = getPosition('line', radius, startX, startY)
    //获得数字的坐标
    const numberPosition = getPosition('number', radius, startX, startY)
    content.beginPath()
    content.moveTo(startX, startY)
    content.lineTo(linePosition.x, linePosition.y)
    if(radius % 30){
        content.lineWidth = 1
    }else{
         //画数字，并加粗
        content.lineWidth = 2
        content.font = '30px Arial'
        content.fillText(getNumber(radius).toString(), numberPosition.x - 12, numberPosition.y + 10)
    }
    content.stock()
    content.closePath()
    radius += 6
}
setClockUrl(canvas.toDataUrl('image/png'))

getPosition方法

const getPosition = useCallback((type:'line' | 'number',radius:number, x:number,y:number)=>{
    let result = {x: 0, y: 0}
    //当radius%30===0的时候，就加长线段长度
    const endX = Math.abs((type === 'line' ? (radius % 30 === 0 ? 20 : 10) : 40) * Math.cos(radius * 2 * Math.PI / 360))
    const endY = Math.abs((type === 'line' ? (radius % 30 === 0 ? 20 : 10) : 40) * Math.sin(radius * 2 * Math.PI / 360))
    if (radius >= 0 && radius < 90) {
      result = { x: x - endX, y: y - endY }
    } else if (radius >= 90 && radius < 180) {
      result = { x: x + endX, y: y - endY }
    } else if (radius >= 180 && radius < 270) {
      result = { x: x + endX, y: y + endY }
    } else {
      result = { x: x - endX, y: y + endY }
    }
    return result
},[])

getNumber方法

const getNumber=useCallback((radius:number)=>{
    const count = radius / 30
    switch(count){
        case 0:
            return 3
        case 10:
        case 11:
        case 12:
            return count - 9
        default:
            return count + 3
    }
},[])

第四步：将图片展示到屏幕上

HTML

{clockUrl.length>0 && <div className='clock'>
    <img className='clock-bg' src={clockUrl} />
    <div className='clock-content'>
          //时、分、秒
          <div className='clock-hour' />
          <div className='clock-minute' />
          <div className='clock-second' />
          <div className='clock-point' />
    </div>
</div>}

CSS

• clock

.clock{
    position:relative;
    width:600;
    height:600;
    border-radius:50%;
}

• clock-bg

.clock-bg{
    width:100%;
    height:100%;
}

• clock-content、clock-point

.clock-point,
.clock-content{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    right:0;
    left:0;
    border-radius:50%;
}
.clock-point{
    width:10px;
    height:10px;
    background-color:peru;
}
.clock-content{
    width:500px;
    height:500px;
    background-color:white;
}

• clock-hour、clock-minute、clock-second

.clock-hour,
.clock-minute,
.clock-second{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.clock-hour{
    background-color: #333;
    width: 15px;
    height: 150px;
    top: 130px;
    transform-origin: 50% 80%;
    animation: seconds 43200s infinite;
}
.clock-minute {
    background-color: #00bfff;
    width: 10px;
    height: 180px;
    top: 110px;
    transform-origin: 50% 77.78%;
    animation: seconds 3600s infinite;
}

.clock-second {
    background-color: #ffd700;
    width: 5px;
    height: 250px;
    top: 50px;
    transform-origin: 50% 80%;
    animation: seconds 60s infinite steps(1);
}

seconds的代码就是每一个百分比时间，让时、分、秒转动6deg

最后看下效果

最终效果gif

欢迎大家来评论🌟🌟🌟