canvas画时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    canvas {
      border: 1px solid black;
      margin:10px auto;
    }
  </style>
</head>
<body>
<canvas id="app" width="1000" height="500">你的浏览器不支持canvas,请升级你的浏览器</canvas>
<script>
  window.onload = function(){
    let canvas = document.querySelector('#app')
    if(!canvas.getContext) return;
    //获得 2d 上下文对象
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(200,0,0)";
    let x = 20
    let y = 20
    let str = '2019-01-19 20:20:20'
    setInterval(function(){
      getTime(ctx,x,y)
    },1000)

    function getTime(ctx,x,y){
      let date = new Date(),//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '',
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1),
        D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()),
        h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()),
        m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()),
        s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
      let time =  Y +'-'+ M +'-'+ D +' '+ h +':'+ m +':'+ s
      drawString(ctx,x,y,time)
    }
    function drawString(ctx,x,y,str){
      ctx.clearRect(0,0,1000,500)
      for(let i=0;i<str.length;i++){
        drawNum(ctx,x+i*30,y,str[i])
      }
    }
    function drawNum(ctx,x,y,num){
      let iconShape = []
      num = isNaN(num) ? num : parseInt(num)
      switch (num) {
        case 0:
          iconShape = ["1111", "1001", "1001", "1001", "1111"]
          break
        case 1:
          iconShape = ["0010", "0110", "0010", "0010", "0111"]
          break
        case 2:
          iconShape = ["1111", "0001", "1111", "1000", "1111"]
          break
        case 3:
          iconShape = ["1111", "0001", "1111", "0001", "1111"]
          break
        case 4:
          iconShape = ["1010", "1010", "1111", "0010", "0010"]
          break
        case 5:
          iconShape = ["1111", "1000", "1111", "0001", "1111"]
          break
        case 6:
          iconShape = ["1111", "1000", "1111", "1001", "1111"]
          break
        case 7:
          iconShape = ["1111", "0001", "0001", "0001", "0001"]
          break
        case 8:
          iconShape = ["1111", "1001", "1111", "1001", "1111"]
          break
        case 9:
          iconShape = ["1111", "1001", "1111", "0001", "0001"]
          break
        case ':':
          iconShape = ["0000", "0010", "0000", "0010", "0000"]
          break
        case '-':
          iconShape = ["0000", "0000", "0110", "0000", "0000"]
          break
        case ' ':
          iconShape = ["0000", "0000", "0000", "0000", "0000"]
          break
        default:
          iconShape = []
      }
      drawIcon(ctx,x,y,iconShape)
    }
    function drawIcon(ctx,x,y,iconShape){
      for(let i = 0 ; i < iconShape.length ; i++ ){
        for(let j = 0;j < iconShape[i].length ;j++ ){
          if(iconShape[i][j] == 1){
            ctx.fillRect (x+j*6, y+i*6, 5, 5);
          }
        }
      }
    }
  }

</script>
</body>
</html>
posted on 2019-10-18 14:55 明明的喵喵阅读(163) 评论(0) 编辑收藏举报