vue + canvas 實現炫酷時鐘

如何基於canvas實現下圖的樣式

demo演示地址： https://mirror198829.github.i...

canvas繪製步驟思路

1. 繪製錶盤的（時針）刻度
2. 繪製錶盤的（分針）刻度
3. 繪製錶盤數字刻度
4. 繪製時針、分針、秒針
5. 繪製中心點
6. 繪製秒針的尾部（優化部分）

實現所需要的知識點

• 畫圓 ctx.arc(x,y,r,開始弧度,結束弧度)
• 畫線 ctx.moveTo(x,y) ctx.lineTo(x1,y1)
• 直角座標系的計算方法
  x = x0 + Math.cos(角度)*長度
y = y0 + Math.sin(角度)*長度
• 定時器

如何實現（時針）刻度盤的繪製

思路：

1. 已知直角座標系的中心點座標（x0,y0）即canvas畫布中心點位置。設定L = 長度
2. 計算出時針的角度，通過直角座標系的計算方法便得出時針刻度的位置。 （12個刻度進行循環便可全部繪製）

計算時針角度的方法：
-90 + i * (360 / 12)
代碼如下：

drawHoursScale(ctx, x0, y0, scaleNum, scaleW, maxL, minL) {
    for (let i = 0; i < scaleNum; i++) {
      let angel = -90 + i * (360 / scaleNum) //角度
      let [x1, y1] = [x0 + Math.cos(angel * Math.PI / 180) * maxL, y0 + Math.sin(angel * Math.PI / 180) * maxL]
      let [x2, y2] = [x0 + Math.cos(angel * Math.PI / 180) * minL, y0 + Math.sin(angel * Math.PI / 180) * minL]
      ctx.save()
      ctx.beginPath()
      ctx.lineWidth = scaleW
      ctx.lineCap = "round"
      ctx.moveTo(x1, y1)
      ctx.lineTo(x2, y2)
      ctx.stroke()
      ctx.closePath()
      ctx.restore()
    }
   }

如何繪製時針/分針/秒針

思路：

1. 已知指針的起點座標（x0,y0）
2. 計算出指針的終點座標（x1,y1）,便可通過lineTo的方式進行繪製

如何計算終點座標 與繪製刻度的思想式類似的

代碼如下：

drawTimeNeedle(ctx, x0, y0, lineW, L, angel, color = '#000') {
    let [x, y] = [x0 + Math.cos(angel * Math.PI / 180) * L, y0 + Math.sin(angel * Math.PI / 180) * L]
    ctx.save()
    ctx.beginPath()
    ctx.strokeStyle = color
    ctx.lineWidth = lineW
    ctx.lineCap = "round"
    ctx.moveTo(x0, y0)
    ctx.lineTo(x, y)
    ctx.stroke()
    ctx.closePath()
    ctx.restore()
  },

說明事項

1. 時鐘樣式 參考 http://www.jq22.com/jquery-in... （可惜下載代碼要幣，一不做二不休自己寫）
2. 源碼地址： https://github.com/Mirror1988... （喜歡的，請給作者github小星星）
3. demo演示地址： https://mirror198829.github.i...