[Canvas] draw a digital clock

Use canvas to a digital clock

Basic content

Here is this case would be to use some of the drawing API

// Get drawing context 
var CTX = canvas.getContext ( '2D' ); 

// draw a line 
ctx.moveTo (100, 100 ); 
ctx.lineTo ( 700, 700 ); 

// plotted 
ctx.arc ( 
CenterX, CenterY , the rADIUS, // value of the coordinates of the center and the radius of 
startingAngle, endingAngle, // which radians radians from the beginning to the end of the 
anticlockwise = false  // clockwise or counterclockwise, clockwise default is false 
) 

// control style 
ctx =. 5 .lineWidth ; 
ctx.strokeStyle = 'Blue' ; 
ctx.fillStyle = 'Blue' ; 

// draw a path 
ctx.stroke ();
 //Filling 
ctx.fill (); 
    
// open path 
ctx.beginPath ();
 // End path 
ctx.closePath (); 

// remove a piece of canvas area 
ctx.clearRect (x, y, width, height)

Code section

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 part

var window_width = 1024; // screen width 
var window_height = 600; // screen height 
var the RADIUS =. 8; // radius 
var MARGIN_TOP = 60; // start position of the Y 
var MARGIN_LEFT = 30; // start position of X- 

var Balls = []; // record pellets 
var Colors = [ 'Red', 'Yellow', '# 000', '# 453' ] 

var DATE = new new a 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, // so diversified ball speed 
          Vy: 0 , 
          Color: Colors [Math.floor (Math.random () * colors.length,) ] 
        } 
        balls.push (aBall); 
      } 
    } 
  } 
  // performance optimization, to remove any other pellet 
  balls Item balls.filter = (() => {
     return item.x the RADIUS +> 0 && the RADIUS-item.x < window_width 
  }) 

  // var CNT = 0; 
  // for (var I = 0; I <balls.length; I ++) { 
  //    IF (Balls [I] .x + the 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 document.documentElement.clientWidth;-Balls = [I] * .vy 0.5 ; 
    } 
  } 
} 

function UPDATA () {
   var seconds The = new new a Date () the getSeconds ();.
   IF (! = Seconds The nowseconds) {
     // add the ball 
    addBalls (MARGIN_LEFT + 93 * ( +. 1 the RADIUS), MARGIN_TOP, the parseInt (seconds the 10% )) 
    nowseconds = seconds the; 
  } 
  // update the ball changes 
  updataBalls (); 
} 

the window.onload = function () {
   // adaptive 
  window_width = 
  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);
}

Bitmap

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]
        ]//:
    ];

 

Guess you like

Origin www.cnblogs.com/Ingots/p/11615474.html