用 canvas 画一个 时钟

可调整画布大小 时钟自适应 大小

效果图

思路

1. 画 出 表盘 含外圈 中心 刻度

2, 画出 时针 分针 秒针

3. 每 1 秒 获取系统当前时间 重绘 整个时钟部件

4. 整个时钟大小 基于 画布大小 可实现自适应

详细 js

window.onload = function(){
        var myClock = new Clock ({
            id: '#cvs'
        })
    }
    var Clock = function (options) {
        this.ctx = document.querySelector(options.id).getContext('2d')
        this.cvsWidth = this.ctx.canvas.width
        this.cvsHeight = this.ctx.canvas.height
        // 圆心
        this.ox = this.cvsWidth/2
        this.oy = this.cvsHeight/2
        //半径
        this.radius = this.cvsHeight/3
        this.init()
    }
    Clock.prototype.init = function( options ) {
        this.drawClockPanel()
        this.drawSecondHand()
        this.drawMinuteHand()
        this.drawHourHand()
        setInterval(function(){
            this.ctx.clearRect(0,0,this.cvsWidth,this.cvsHeight)
            var now = new Date()
            this.second = now.getSeconds()
            this.minute = now.getMinutes()
            this.hour = now.getHours()
            this.drawClockPanel()
            this.drawSecondHand()
            this.drawMinuteHand()
            this.drawHourHand()
        }.bind(this),1000)
    }
    // 表盘
    Clock.prototype.drawClockPanel = function(){
        this.ctx.save()
        this.ctx.beginPath()
        this.ctx.fillStyle = '#333'
        this.ctx.arc(this.ox,this.oy,this.radius,0,Math.PI*2,) // 外圈
        this.ctx.stroke()
        this.ctx.closePath()

        this.ctx.beginPath()
        this.ctx.arc(this.ox,this.oy,this.radius*0.05,0,Math.PI *2) // 中心 
        this.ctx.fill()
        this.ctx.closePath()
        this.ctx.restore()
        // 表盘 刻度
        this.ctx.save()
        this.ctx.translate(this.ox,this.oy)
        for( var i = 0 ; i< 60; i ++) {
            this.ctx.beginPath()
            if(i>0){
                this.ctx.rotate(Math.PI/30)
            }
            if(i % 5 === 0) {
                this.ctx.rect(this.radius - this.radius * 0.1, -this.radius * 0.02 , this.radius * 0.1, this.radius * 0.04)
                this.ctx.fill()
            }else{
                this.ctx.moveTo(this.radius,0)
                this.ctx.lineTo(this.radius - this.radius * 0.05, 0)
                this.ctx.stroke()
            }
            this.ctx.closePath()
        }
        this.ctx.restore()
    }
    // 秒针
    Clock.prototype.drawSecondHand = function(){
        var s = this.second || 0
            this.ctx.save()
            this.ctx.translate(this.ox,this.oy)
            this.ctx.rotate(s * 2 * Math.PI /60 - Math.PI/2 ) // 把  0位置 调整到 12点钟方向上
            this.ctx.beginPath()
            this.ctx.moveTo( -this.radius * 0.1 , 0)
            this.ctx.lineTo( this.radius * 0.9 ,0)
            this.ctx.lineTo( this.radius * 0.85, this.radius * 0.02)
            this.ctx.lineTo(this.radius * 0.85 , - this.radius * 0.02)
            this.ctx.lineTo(this.radius * 0.9 ,0)
            this.ctx.strokeStyle = '#333'
            this.ctx.fillStyle = '#333'
            this.ctx.fill()
            this.ctx.stroke()
            this.ctx.restore()
    }
    // 分针
    Clock.prototype.drawMinuteHand = function (minute) {
        var m = this.minute || 0
        var s = this.second || 0
        // 把 0位置 调整到 12点钟方向上  分针角度 = 分 + 秒 
        var angle =( m * 2 * Math.PI /60 - Math.PI/2 ) + (s* 2 * Math.PI /60 /60)
        this.ctx.save()
        this.ctx.translate(this.ox,this.oy)
        this.ctx.rotate(angle) 
        this.ctx.beginPath()
        this.ctx.rect( -this.radius * 0.1 , - this.radius*0.01 , this.radius *0.9 ,this.radius*0.02)
        this.ctx.strokeStyle = '#333'
        this.ctx.stroke()
        this.ctx.restore()
    }
    // 时针
    Clock.prototype.drawHourHand = function () {
        var h = this.hour || 0
        var m = this.minute || 0
        var s = this.secont || 0
        // 把 0位置 调整到 12点钟方向上 时针 = 小时 + 分 + s
        var angle = (h * 2 *Math.PI / 12 - Math.PI/2 ) + (m * 2 *Math.PI / 12 /60) + (s* 2 *Math.PI / 12 / 60 /60)
        this.ctx.save()
        this.ctx.translate(this.ox,this.oy)
        this.ctx.rotate(angle ) 
        this.ctx.beginPath()
        this.ctx.rect( -this.radius * 0.1 , - this.radius*0.02 , this.radius *0.7 ,this.radius*0.04)
        this.ctx.strokeStyle = '#333'
        this.ctx.stroke()
        this.ctx.restore()
    }

小结

使用 api save translate rotate restore 灵活 方便 画出需要旋转角度 和 相对 原点的位置