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