Examinons d’abord l’effet de l’horloge à particules, comme suit :
Ci-dessous, nous allons l'implémenter via Canvas et JS,
Tout d’abord, créez un fichier HTML et ajoutez un canevas, comme suit :
<!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <title>Document</title> <style> .container{ margin: 0, auto; ></head><body> <div id=container> <canvas id=canvas></canvas> </div></body>Ensuite, importez le matériau, digit.js. Le matériau est composé de nombres utilisant des tableaux bidimensionnels. Il y a un total de dix caractères : 0 à 9 et deux points, comme suit :
Vous pouvez voir que les caractères 1 sont composés de
Commençons par créer le canevas :
function Clock() { var canvas = document.getElementById(canvas); canvas.width = 600; canvas.height = 100; .cxt.fillRect(0, 0, 500, 100 })Le code ci-dessus peut dessiner une petite toile grise dans le navigateur
Commençons l’analyse ci-dessous :
1. Comprendre la matrice de données ? C'est un tableau multidimensionnel
2. Comment dessiner un cercle ?
2.1 Faut-il d'abord connaître le rayon ?
Comme le montre la figure ci-dessus, les positions du centre du cercle sont :
r+1r+1 + (r+1)*2*1r+1 + (r+1)*2*2. . . r+1 + (r+1)*2*je
Dans le même temps, le rayon peut également être obtenu en calculant la hauteur du cercle, comme suit :
La hauteur d'un cercle est (r+1)*2, et la hauteur de la toile est composée de 10 cercles.
hauteur de la toile = (r+1)*2*10
Si la hauteur du canevas est définie sur 100, alors r apparaîtra, le centre du cercle xy apparaîtra également et le cercle commencera à être dessiné.
Tout d’abord, ajoutez une instruction à l’objet Clock ci-dessus pour calculer r
ceci.r = 100/20-1 ;
Ensuite, j'ajoute la méthode draw au prototype Clock.
Clock.prototype.draw = function(num, index) { this.cxt.fillStyle=#000; for (let i=0; i<digit[num].length; i++) { for (let j=0; j< chiffre[num][i].length; j++) { if (chiffre[num][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, false); this.cxt.closePath(); this.cxt.fill();draw reçoit 2 paramètres, le premier est l'index des caractères, le second est la séquence de décalage des caractères, 70 est une distance de décalage, qui peut être personnalisée.
Le premier for obtient le tableau de caractères à restituer. Le second for prend chaque ligne pour le rendu et ne la restitue que sous la forme 1. Les paramètres pour dessiner un cercle sont principalement x, y, r.
Ensuite, nous devons obtenir l'heure. Nous pouvons obtenir directement l'heure à partir de la nouvelle date en utilisant les règles habituelles, comme suit :
Clock.prototype.getTime = function() { var reg = /(/d)(/d):(/d)(/d):(/d)(/d)/.exec(new Date()); var data = []; data.push(reg[1], reg[2], 10, reg[3], reg[4], 10, reg[5], reg[6]); je=0; je<données.longueur; je++) { this.draw(données[i], je } }Vous pouvez facilement obtenir les heures, les minutes et les secondes via des expressions régulières. Lorsque vous poussez le tableau, faites attention au format correspondant. 10 représente le 10ème caractère dans digit.js, qui est le deux-points.
Notez qu'il y aura un problème avec une peinture comme celle-ci, c'est-à-dire que la toile ne peut pas être actualisée. Vous pouvez ajouter ceci.
toile.hauteur = 100
Vous pouvez maintenant exécuter le code comme suit :
var clock = new Clock();setInterval(()=>{ clock.getTime(); })D'accord, c'est ok
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.