没钱买表某前端程序员竟然用代码画了个表😄

clock.jpeg

在线Demo https://codepen.io/DiscoverForever/pen/dyXKaqb

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #canvas {
      width: 200px;
      height: 200px;
    }
  </style>
  <script src="./index.js"></script>
</head>

<body>
  <canvas id="canvas" width="200" height="200"></canvas>
</body>

</html>

Javascript代码

function init() {
  const canvas = document.getElementById('canvas')
  const width = canvas.width
  const height = canvas.height
  canvas.style.width = width + 'px'
  canvas.style.height = height + 'px'
  canvas.height = height * devicePixelRatio
  canvas.width = width * devicePixelRatio
  let ctx = null
  if (canvas.getContext) {
    ctx = canvas.getContext('2d')
  } else {
    alert('该浏览器暂不支持Canvas')
    return
  }
  setInterval(() => {
    // 清空画布
    canvas.height = height * devicePixelRatio
    canvas.width = width * devicePixelRatio
    run(ctx)
  }, 1000)
}

function run(ctx) {

  const date = new Date()
  renderCircle(ctx, 100, 100, 99, 'grey')
  renderCircle(ctx, 100, 100, 94, 'black')
  renderHourHand(ctx, getHourHandAngle(date.getHours()))
  renderMinuteHand(ctx, getMinuteHandAngle(date.getMinutes()))
  renderSecondHand(ctx, getSecondHandAngle(date.getSeconds()))
  artCenterCircle(ctx)
  renderScaleLabel(ctx)
  renderHourScale(ctx)
  renderMinuteScale(ctx)

}

/**
 * 获取时针偏转角度
 * @param {*} second
 * @returns
 */
function getHourHandAngle(hour) {
  let currentHour = null
  if (hour <= 12) {
    currentHour = hour
  } else {
    currentHour = hour - 12
  }
  return currentHour * 30 * (Math.PI / 180)
}

/**
 * 获取分针偏转角度
 * @param {*} second
 * @returns
 */
function getMinuteHandAngle(minute) {
  return minute * 6 * (Math.PI / 180)
}

/**
 * 获取秒针偏转角度
 * @param {*} second
 * @returns
 */
function getSecondHandAngle(second) {
  return second * 6 * (Math.PI / 180)
}

/**
 * 画圆
 */
function renderCircle(ctx, x, y, radius, color, lineWidth = 1) {
  ctx.beginPath()
  ctx.strokeStyle = color
  ctx.lineWidth = lineWidth
  ctx.arc(x * devicePixelRatio, y * devicePixelRatio, radius * devicePixelRatio, 0, 2 * Math.PI, false)
  ctx.stroke()
  ctx.closePath()
}

/**
 * 画时针
 * @param {*} ctx 
 * @param {*} angle 
 */
function renderHourHand(ctx, angle) {
  ctx.beginPath()
  ctx.save()
  ctx.translate(100 * devicePixelRatio, 100 * devicePixelRatio)
  ctx.rotate(angle)
  ctx.strokeStyle = 'black'
  ctx.lineWidth = 10
  ctx.moveTo(0, 0)
  ctx.lineTo(0, -40 * devicePixelRatio)
  ctx.stroke()
  ctx.restore()
  ctx.closePath()
}

/**
 * 画分针
 * @param {*} ctx
 * @param {*} angle
 */
function renderMinuteHand(ctx, angle) {
  ctx.beginPath()
  ctx.save()
  ctx.translate(100 * devicePixelRatio, 100 * devicePixelRatio)
  ctx.rotate(angle)
  ctx.strokeStyle = 'black'
  ctx.lineWidth = 6
  ctx.moveTo(0, 0)
  ctx.lineTo(0, -60 * devicePixelRatio)
  ctx.stroke()
  ctx.restore()
  ctx.closePath()
}


/**
 * 画秒针
 * @param {*} ctx
 * @param {*} angle
 */
function renderSecondHand(ctx, angle) {
  ctx.beginPath()
  ctx.save()
  ctx.translate(100 * devicePixelRatio, 100 * devicePixelRatio)
  ctx.rotate(angle)
  ctx.strokeStyle = 'black'
  ctx.lineWidth = 2
  ctx.moveTo(0, 0)
  ctx.lineTo(0, -90 * devicePixelRatio)
  ctx.stroke()
  ctx.restore()
  ctx.closePath()

}

/**
 * 表心
 * @param {*} ctx 
 */
function artCenterCircle(ctx) {
  ctx.beginPath()
  ctx.lineWidth = 1
  ctx.fillStyle = 'black'
  ctx.arc(100 * devicePixelRatio, 100 * devicePixelRatio, 4 * devicePixelRatio, 0, 2 * Math.PI, false)
  ctx.fill()
}

/**
 * 画表盘刻度
 * @param {*} ctx 
 */
function renderScale(ctx) {
  const lables = genClockScale(100, 100, 94)
  ctx.beginPath()
  lables.forEach(label => {
    ctx.moveTo(label.x, label.y)
    ctx.lineTo(100 * devicePixelRatio, 100 * devicePixelRatio)
  })
  ctx.stroke()
}

/**
 * 画小时刻度
 */
function renderHourScale(ctx) {
  for (var i = 0; i < 12; i++) {
    ctx.beginPath()
    ctx.save()
    ctx.translate(102 * devicePixelRatio, 98 * devicePixelRatio)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'black'
    ctx.rotate(i * 30 * Math.PI / 180)
    ctx.moveTo(0, -94 * devicePixelRatio)
    ctx.lineTo(0, -89 * devicePixelRatio)
    ctx.stroke()
    ctx.restore()
    ctx.closePath()
  }
}

/**
 * 画分刻度
 */
function renderMinuteScale(ctx) {
  for (var i = 0; i < 60; i++) {
    ctx.beginPath()
    ctx.save()
    ctx.translate(102 * devicePixelRatio, 98 * devicePixelRatio)
    ctx.lineWidth = 1
    ctx.strokeStyle = 'black'
    ctx.rotate(i * 6 * Math.PI / 180)
    ctx.moveTo(0, -94 * devicePixelRatio)
    ctx.lineTo(0, -92 * devicePixelRatio)
    ctx.stroke()
    ctx.restore()
    ctx.closePath()
  }
}

/**
 * 画表盘数字
 */
function renderScaleLabel(ctx) {
  const lables = genClockScale(100, 100, 82)
  ctx.beginPath()
  ctx.font = `${10 * devicePixelRatio}px Pingfang`
  ctx.translate(-2 * devicePixelRatio, 2 * devicePixelRatio)
  lables.forEach(label => ctx.fillText(label.text, label.x, label.y))
  ctx.translate(0, 0)
  ctx.closePath()
}
/**
 * 获取刻度坐标
 * @param {*} x 圆心x
 * @param {*} y 圆心y
 * @param {*} radius 半径
 * @returns
 */
function genClockScale(ccX, ccY, radius, offset = 0) {
  const lables = [9, 10, 11, 12, 1, 2, 3, 4, 5, 6, 7, 8]
  return lables.map((label, index) => {
    const angle = Math.PI * 2 / 12 * index
    let x = ccX - radius * Math.cos(angle) + offset
    let y = ccY - radius * Math.sin(angle) + offset
    return {
      angle,
      text: label,
      x: x * devicePixelRatio,
      y: y * devicePixelRatio,
    }
  })
}

window.onload = init