canvas绘制一个数字时钟

Posted ingots

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas绘制一个数字时钟相关的知识,希望对你有一定的参考价值。

使用canvas绘制一个数字时钟

基础内容

下面是此案例中会使用到的一些绘图API

//获取绘图上下文
var ctx = canvas.getContext(‘2d‘);

//绘制直线
ctx.moveTo(100, 100);
ctx.lineTo(700, 700);

//绘制曲线
ctx.arc(
centerx, centery, radius, //圆心的坐标以及半径的值
startingAngle,endingAngle, //从哪个弧度制开始到那个弧度值结束
anticlockwise=false //顺时针还是逆时针,默认是顺时针false
)

//控制样式
ctx.lineWidth = 5;
ctx.strokeStyle = ‘blue‘;
ctx.fillStyle = ‘blue‘;

//绘制路径
ctx.stroke();
//填充
ctx.fill();
    
//开启路径
ctx.beginPath();
//结束路径
ctx.closePath();

//清除canvas的某块区域
ctx.clearRect(x,y,width,height)

代码部分

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * 
      margin: 0;
    
    #canvas 
      margin: 0 auto;
      display: block;
    
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="./digit.js"></script>
  <script src="./countdown.js"></script>
</body>
</html>

js部分

var WINDOW_WIDTH = 1024; // 屏幕宽度
var WINDOW_HEIGHT = 600; // 屏幕高度
var RADIUS = 8; //半径
var MARGIN_TOP = 60; //起始位置Y
var MARGIN_LEFT = 30; //起始位置X

var balls = []; // 记录小球
var colors = [‘red‘, ‘yellow‘, ‘#000‘, ‘#453‘]

var date = new Date();
var nowhours = date.getHours(),
  nowminutes = date.getMinutes(),
  nowseconds = date.getSeconds();

//渲染
function render(cxt) 
  //刷新之前的canvas
  cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
  var date = new Date();
  var hours = nowhours,
    minutes = nowminutes,
    seconds = nowseconds;

  //渲染点阵
  renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)
  renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)
  renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt)
  renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);
  renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
  renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);
  renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
  renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);

  // 渲染运动的小球
  for (var i = 0; i < balls.length; i++) 
    cxt.fillStyle = balls[i].color;
    cxt.beginPath();
    cxt.arc(balls[i].x,balls[i].y, RADIUS, 0, 2 * Math.PI)
    cxt.closePath()
    cxt.fill()
  


//点阵的转换
function renderDigit(x, y, num, cxt) 
  cxt.fillStyle = "rgb(0,102,153)";
  for (var i = 0; i < digit[num].length; i++)
    for (var j = 0; j < digit[num][i].length; j++)
      if (digit[num][i][j] == 1) 
        cxt.beginPath();
        cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI)
        cxt.closePath()
        cxt.fill()
      


//添加小球
function addBalls(x, y, num) 
  for (var i = 0; i < digit[num].length; i++) 
    for (var j = 0; j < digit[num][i].length; j++) 
      if (digit[num][i][j] == 1) 
        //添加球
        var aBall = 
          x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
          y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
          g: 1.5 + Math.random(),
          vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4, //让小球的速度多元化
          vy: 0,
          color: colors[Math.floor(Math.random() * colors.length)]
        
        balls.push(aBall);
      
    
  
  //性能优化,清除不符合条件的小球
  balls = balls.filter((item)=>
    return item.x+RADIUS > 0 && item.x-RADIUS<WINDOW_WIDTH
  )

  // var cnt = 0;
  // for (var i = 0; i < balls.length; i++) 
  //   if (balls[i].x+RADIUS > 0 && balls[i].x-RADIUS<WINDOW_WIDTH) 
  //     balls[cnt++] = balls[i]
  //   
  // 
  // while(balls.length > Math.min(300,cnt)) 
  //   balls.pop();
  // 
  // console.log(balls.length)

//更新小球变化
function updataBalls() 
  for (var i = 0; i < balls.length; i++) 
    balls[i].x += balls[i].vx;
    balls[i].y += balls[i].vy;
    balls[i].vy += balls[i].g;
    if (balls[i].y >= WINDOW_HEIGHT - RADIUS) 
      balls[i].y = WINDOW_HEIGHT - RADIUS;
      balls[i].vy = -balls[i].vy * 0.5;
    
  


function updata() 
  var seconds = new Date().getSeconds();
  if (seconds != nowseconds) 
    // 添加球
    addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10))
    nowseconds = seconds;
  
  //更新球的变化
  updataBalls();


window.onload = function () 
  //自适应
  WINDOW_WIDTH = document.documentElement.clientWidth;
  WINDOW_HEIGHT = document.documentElement.clientHeight;
  MARGIN_LEFT = WINDOW_WIDTH/10;
  RADIUS =  Math.round(WINDOW_WIDTH*4/5/108)-1;
  var canvas = document.getElementById(‘canvas‘);
  var context = canvas.getContext("2d");
  canvas.width = WINDOW_WIDTH;
  canvas.height = WINDOW_HEIGHT;

  setInterval(function () 
    //渲染
    render(context);
    //更新
    updata();
  , 100);

点阵图

digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];

 

以上是关于canvas绘制一个数字时钟的主要内容,如果未能解决你的问题,请参考以下文章

用canvas绘制一个简易时钟

小任务之Canvas绘制时钟

canvas自适应圆形时钟绘制

h5 Canvas时钟制作

程序员教你如何用canvas自适应圆形时钟绘制

canvas绘画时钟及倒计时时钟