Primero veamos el efecto del reloj de partículas, de la siguiente manera:
A continuación lo implementaremos a través de canvas y js,
Primero, cree un archivo html y agregue un lienzo, de la siguiente manera:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Documento</title> <style> .container{ margin: 0, auto width: 600px; </head><body> <div id=contenedor> <canvas id=canvas></canvas> </div></body>A continuación, importe el material, digit.js. El material se compone de números que utilizan matrices bidimensionales. Hay un total de diez caracteres: del 0 al 9 y dos puntos, de la siguiente manera:
Puedes ver que los personajes 1 están compuestos por
Comencemos a crear el lienzo:
función Reloj() { var lienzo = document.getElementById(lienzo.ancho = 600; lienzo.altura = 100; este.cxt = lienzo.getContext('2d'); .cxt.fillRect(0, 0, 500, 100);El código anterior puede dibujar un pequeño lienzo gris en el navegador.
Comencemos el análisis a continuación:
1. ¿Entender la matriz de datos? Es una matriz multidimensional
2. ¿Cómo dibujar un círculo?
2.1 ¿Necesitas saber primero el radio?
Como puede verse en la figura anterior, las posiciones del centro del círculo son:
r+1r+1 + (r+1)*2*1r+1 + (r+1)*2*2. . . r+1 + (r+1)*2*yo
Al mismo tiempo, el radio también se puede obtener calculando la altura del círculo, de la siguiente manera:
La altura de un círculo es (r+1)*2 y la altura del lienzo se compone de 10 círculos.
Altura del lienzo = (r+1)*2*10
Si la altura del lienzo se establece en 100, aparecerá r, también aparecerá el centro del círculo xy y el círculo comenzará a dibujarse.
Primero, agregue una declaración al objeto Reloj de arriba para calcular r
this.r = 100/20-1;
A continuación, agrego el método de dibujo al prototipo de Reloj.
Clock.prototype.draw = function(num, index) { this.cxt.fillStyle=#000; for (let i=0; i<digit[num].length; i++) { for (let j=0; j< dígito[núm][i].length; j++) { if (dígito[núm][i][j] == 1) { this.cxt.beginPath(); this.cxt.arc(index*70+(this.r+1)+(this.r+1)*2*j, (this.r+1)+(this.r+1)*2*i, this.r, 0, Math.PI*2, falso); this.cxt.closePath(); this.cxt.fill();draw recibe 2 parámetros, el primero es el índice de caracteres, el segundo es la secuencia de desplazamiento de caracteres, 70 es una distancia de desplazamiento, que se puede personalizar.
El primero obtiene la matriz de caracteres que se va a representar. El segundo toma cada línea para representarla y solo la representa como 1. Los parámetros para dibujar un círculo son principalmente x, y, r.
A continuación, necesitamos obtener la hora. Podemos obtener la hora directamente desde la nueva Fecha usando reglas regulares, de la siguiente manera:
Clock.prototype.getTime = function() { var reg = /(/d)(/d):(/d)(/d):(/d)(/d)/.exec(new Date()); var datos = []; datos.push(reg[1], reg[2], 10, reg[3], reg[4], 10, reg[5], reg[6]); i=0; i<datos.longitud; i++) { this.draw(datos[i], i);Puede obtener fácilmente las horas, minutos y segundos a través de expresiones regulares. Al presionar la matriz, preste atención al formato correspondiente. 10 representa el décimo carácter en digit.js, que son los dos puntos.
Tenga en cuenta que habrá un problema al pintar de esta manera, es decir, el lienzo no se puede actualizar. Puede agregar esto.
lienzo.altura= 100
Ahora puede ejecutar el código de la siguiente manera:
var reloj = nuevo Reloj();setInterval(()=>{ reloj.getTime(); })Bien, esto está bien.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.