Méthode détaillée d'implémentation de l'horloge de particules dans le canevas h5

Le contenu de cet article concerne la méthode détaillée d'implémentation de l'horloge de particules dans le canevas h5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Regardons d'abord l'effet de l'horloge à particules, comme suit :

Ensuite, nous allons implémenter via canvas et js,
créez d'abord un fichier html et ajoutez un canevas, comme suit :

nbsp;html>


    <meta>
    <title>Document</title>
    <style>
        .container{
            margin: 0, auto;
            width: 600px;
        }
    </style>


    <p>
        <canvas></canvas>
    </p>

Ce qui suit importe le matériau, digit.js, et le matériau est assemblé en tableaux bidimensionnels un par un Nombres, total : 0-9 et deux-points, dix caractères, comme suit :

Vous pouvez voir que les caractères de 1 composent
Commençons par créer le canevas :

function Clock() {
        var canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 100;
        this.cxt = canvas.getContext('2d');
        this.cxt.fillStyle="#ddd";
        this.cxt.fillRect(0, 0, 500, 100);
    }

Le code ci-dessus permet de dessiner un petit canevas gris dans le navigateur
Commençons l'analyse :
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 ?

D'après la figure ci-dessus, les positions du centre du cercle sont :

r+1
r+1 + (r+1)*2*1
r+1 + (r+1)*2*2
。。。
r+1 + (r+1)*2*i

En même temps, vous pouvez également obtenir le rayon 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

canvasHeight = (r+1)*2*10

Si la hauteur de la toile est Réglez-la sur 100, alors r sort, le centre xy sort également et le cercle commence à être dessiné
Tout d'abord, ajoutez une déclaration à l'objet Clock ci-dessus pour calculer r

this.r = 100/20-1;

Ci-dessous je suis dans Clock Ajoutez la méthode draw au prototype

Clock.prototype.draw = function(num, index) {
        this.cxt.fillStyle="#000";
        for (let i=0; i<digit><p>draw reçoit 2 paramètres, le premier est l'index des caractères, le la deuxième est la séquence de décalage des caractères, 70 est une distance de décalage, qui peut être personnalisée. <br>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</p>
<p> Le suivant L'étape consiste à obtenir l'heure. Nous pouvons obtenir directement l'heure à partir de la nouvelle date en utilisant des expressions régulières, comme suit : </p>
<pre class="brush:php;toolbar:false">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]);
        for (var i=0; i<data.length><p>Les heures, les minutes et les secondes peuvent être facilement obtenues via des expressions régulières. faites attention au format correspondant, où 10 signifie Le 10ème caractère dans digit.js, c'est-à-dire les deux points <br> Notez qu'il y aura un problème lors du dessin comme celui-ci, c'est-à-dire que le canevas ne peut pas être actualisé. ajoutez ceci </p>
<pre class="brush:php;toolbar:false">canvas.height= 100

et le code peut être exécuté ci-dessous, comme suit :

var clock = new Clock();
setInterval(()=>{
        clock.getTime();
    })

D'accord, c'est ok.

Recommandations associées :

Utilisez le canevas h5 pour réaliser l'effet dynamique de l'horloge

Canvas pour réaliser la particule éblouissante effet de mouvement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!