<!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>