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