Vejamos primeiro o efeito do relógio de partículas, como segue:
Abaixo iremos implementá-lo através de canvas e js,
Primeiro, crie um arquivo html e adicione um canvas, conforme a seguir:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Documento</title> <style> .container{ margem: 0, largura automática: 600px } </style; ></head><body> <div id=container> <canvas id=canvas></canvas> </div></body>Em seguida, importe o material, digit.js. O material é composto por números usando matrizes bidimensionais. Há um total de dez caracteres: 0-9 e dois pontos, como segue:
Você pode ver que os caracteres 1 são compostos por
Vamos começar a criar a tela:
função Relógio() { var canvas = document.getElementById(canvas); canvas.width = 600; .cxt.fillRect(0, 0, 500, 100);O código acima pode desenhar uma pequena tela cinza no navegador
Vamos começar a análise abaixo:
1. Entende a matriz de dados? É uma matriz multidimensional
2. Como desenhar um círculo?
2.1 Você precisa saber o raio primeiro?
Como pode ser visto na figura acima, as posições do centro do círculo são:
r+1r+1 + (r+1)*2*1r+1 + (r+1)*2*2. . . r+1 + (r+1)*2*eu
Ao mesmo tempo, o raio também pode ser obtido calculando a altura do círculo, da seguinte forma:
A altura de um círculo é (r+1)*2, e a altura da tela é composta por 10 círculos.
altura da tela = (r+1)*2*10
Se a altura da tela estiver definida como 100, então r aparecerá, o centro do círculo xy também aparecerá e o círculo começará a ser desenhado.
Primeiro, adicione uma instrução ao objeto Clock acima para calcular r
isto.r = 100/20-1;
A seguir, adiciono o método draw ao protótipo Clock.
Clock.prototype.draw = function(num, index) { this.cxt.fillStyle=#000; for (deixe i=0; i<dígito[num].comprimento; i++) { for (deixe j=0; j< dígito[num][i].comprimento; j++) { if (dígito[num][i][j] == 1) { this.cxt.beginPath(); this.cxt.arc(índice*70+(this.r+1)+(this.r+1)*2*j, (this.r+1)+(this.r+1)*2*i, this.r, 0, Math.PI*2, false); this.cxt.closePath();draw recebe 2 parâmetros, o primeiro é o índice de caracteres, o segundo é a sequência de deslocamento de caracteres, 70 é uma distância de deslocamento, que pode ser personalizada.
O primeiro for obtém a matriz de caracteres a ser renderizada. O segundo for pega cada linha para renderização e apenas a renderiza como 1. Os parâmetros para desenhar um círculo são principalmente x, y, r.
Em seguida, precisamos obter a hora. Podemos obter a hora diretamente da nova data usando regras regulares, como segue:
Clock.prototype.getTime = function() { var reg = /(/d)(/d):(/d)(/d):(/d)(/d)/.exec(new Date()); var dados = []; dados.push(reg[1], reg[2], 10, reg[3], reg[4], 10, reg[5], reg[6]); i=0; i<dados.comprimento; i++) { this.draw(dados[i], i);Você pode obter facilmente as horas, minutos e segundos por meio de expressões regulares. Ao enviar o array, preste atenção ao formato correspondente 10 representa o décimo caractere em digit.js, que é dois pontos.
Observe que haverá um problema ao pintar assim, ou seja, a tela não pode ser atualizada.
tela.altura = 100
Agora você pode executar o código da seguinte maneira:
var clock = new Clock();setInterval(()=>{ clock.getTime(); })Ok, está tudo bem
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.