JS + Canvas realisiert dynamischen Uhreffekt

Eine auf Canvas basierende Demo einer dynamischen Uhr steht Ihnen als Referenz zur Verfügung. Die spezifischen Inhalte sind wie folgt

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <title>Dynamische Uhr</title>
  <script type="text/javascript" src="js/lattice.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <style type="text/css">
   *{
    Polsterung: 0;
    Rand: 0;
   }
   #canvasBox{
    Rahmenbreite: 2px;
    Rahmenfarbe: schwarz;
    Rahmenstil: durchgezogen;
    Breite: 80%;
    Rand: 0 automatisch;
   }
  </Stil>
 </Kopf>
 <Text>
  <!-- Legen Sie die Leinwand in eine Box und verwenden Sie die Box, um die Position der Leinwand zu steuern-->
  <div id="Leinwandbox">
   <canvas id="Leinwand">
    Dieser Browser unterstützt kein Canvas
   </Leinwand>
  </div>
 </body>
</html>

gitter.js

Gitter =
    [
        [
            [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]
        ]//:
    ];

script.js

var CANVAS_WIDTH;
var CANVAS_HEIGHT = 600;
//Den Radius des Kreises in der Punktmatrix festlegen var RADIUS = 8;
//Position der Uhr vom Rand aus festlegen var MARGIN_LEFT = 100;
var MARGIN_TOP = 40;
 
//Anfangszeit abrufen var time = new Date();
var Stunden = Zeit.getHours();
var Minuten = Zeit.getMinutes();
var Sekunden = Zeit.getSeconds();
 
//Wird zum Speichern von Ballobjekten verwendet var balls = [];
//Ballfarbe var Farben = ["rot","orange","gelb","grün","blau","lila","pink"]
 
fenster.onload = funktion(){
 //Ermitteln Sie die Breite des äußeren Felds der Leinwand, um der Leinwand die gleiche Breite wie das äußere Feld zu geben. var canvasBox = document.getElementById("canvasBox");
 var boxWidth = getComputedStyle(canvasBox,null);
 CANVAS_WIDTH = parseInt(Boxbreite.width);
 
 //Leinwandbreite und -höhe festlegen und Pinselobjekt abrufen var canvas = document.getElementById("canvas");
 Leinwand.Breite = Leinwandbreite;
 Leinwand.Höhe = Leinwandhöhe;
 var Kontext = Canvas.getContext("2d");
 
 //Zeitgesteuerter Aufruf, Aufruf alle 50 Millisekunden setInterval(function(){
  //Zeichenfunktion draw(context);
 },50);
 
 Funktion zeichnen(ctx){
  //Bildschirm aktualisieren ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
  
  //Aktuelle Uhrzeit abrufen var curTime = new Date();
  var curHours = curTime.getHours();
  var curMinutes = curTime.getMinutes();
  var curSeconds = curTime.getSeconds();
 
  //Stunden zeichnen drawLattice(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10),ctx);
  zeichneGitter(LINKS+15*(RADIUS+1),OBEN,parseInt(aktuelleStunden%10),ctx);
  //Doppelpunkt zeichnen drawLattice(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx);
  //Minuten zeichnen drawLattice(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10),ctx);
  zeichneGitter(LINKS+54*(RADIUS+1),OBEN,parseInt(aktuelleMinuten%10),ctx);
  //Doppelpunkt zeichnen drawLattice(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,ctx);
  //Sekunden zeichnen drawLattice(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10),ctx);
  zeichneGitter(LINKS+93*(RADIUS+1),OBEN,parseInt(curSeconds%10),ctx);
  
  //Aktualisiere die Zeit und zeichne den Ball update(context,curHours,curMinutes,curSeconds);
  
  //Anzahl der Bälle beobachten//console.log(balls.length);
 }
 
 //Parameter:
 //x: zeichne die horizontale Koordinate der oberen linken Ecke des digitalen Gitters //y: zeichne die vertikale Koordinate der oberen linken Ecke des digitalen Gitters //num: die zu zeichnende Zahl, eigentlich der Index des Gitters, 10 steht für den Doppelpunkt //ctx: Pinselfunktion drawLattice(x,y,num,ctx){
  für (var i = 0; i < Gitter [Anzahl]. Länge; i++) {
   für(var j=0;j<Gitter[Anzahl][i].Länge;j++){
    wenn(Gitter[Anzahl][i][j]==1){
     ctx.beginPath();
     ctx.fillStyle = "blau";
     ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
     ctx.fill();
     ctx.closePath();
    }
   }
  }
 }
 
 //Zeit aktualisieren und den Ball zeichnen function update(ctx,curHours,curMinutes,curSeconds){
  if (Sekunden!=aktuelleSekunden) {
   //Stunden aktualisierenif(parseInt(curHours/10)!=parseInt(hours/10)){
    addBalls(LINKS, OBEN, parseInt(aktuelleStunden/10));
   }
   wenn (parseInt(aktuelleStunden%10)!=parseInt(Stunden%10)){
    addBalls(LINKS+15*(RADIUS+1),OBEN+MARGIN,parseInt(aktuelleStunden%10));
   }
   //Minuten aktualisierenif(parseInt(curMinutes/10)!=parseInt(minutes/10)){
    addBalls(LINKS+39*(RADIUS+1),OBEN,parseInt(aktuelleMinuten/10));
   }
   wenn (parseInt(curMinutes%10)!=parseInt(minutes%10)){
    addBalls(LINKS+54*(RADIUS+1),OBEN+MARGIN,parseInt(aktuelleMinuten%10));
   }
   //Sekunden aktualisieren if(parseInt(curSeconds/10)!=parseInt(seconds/10)){
    addBalls(LINKS+78*(RADIUS+1),OBEN,parseInt(aktuelleSekunden/10));
   }
   wenn (parseInt(curSeconds%10)!=parseInt(Sekunden%10)){
    addBalls(LINKS+93*(RADIUS+1),OBEN,parseInt(curSeconds%10));
   }
   
   //Alle Zeiten aktualisieren hours = curHours;
   Minuten = aktuelleMinuten;
   Sekunden = aktuelle Sekunden;
  }
  //Bälle zeichnen drawBalls(ctx);
  //Ballbewegung aktualisieren updateBalls();
 }
 
 //Einen einzelnen Ball hinzufügen//Parameter:
 //x: die horizontale Koordinate des Balls //y: die vertikale Koordinate des Balls //num: die sich mit der Zeit ändernde Zahl function addBalls(x,y,num){
  für (var i = 0; i < Gitter [Anzahl]. Länge; i++) {
   für(var j=0;j<Gitter[Anzahl][i].Länge;j++){
    wenn(Gitter[Anzahl][i][j]==1){
     //Füge ein kleines Ballobjekt hinzu var ball = {
      //Koordinate x:x+j*2*(RADIUS+1)+(RADIUS+1),
      y:y+i*2*(RADIUS+1)+(RADIUS+1),
      // Erdbeschleunigung g:1,5+Math.random(),
      //Geschwindigkeit in x- und y-Richtung vx:Math.pow(-1,Math.ceil(Math.random()*1000))*5,
      v:-5,
      //Ballfarbe Farbe: Farben [Math.floor (Math.random () * Farben.Länge)]
     }
     //Den Ball zur Speicherwarteschlange hinzufügen balls.push(ball);
    }
   }
  }
 }
 
 //Zeichne den Ball Funktion drawBalls(ctx){
  für(var i=0;i<balls.length;i++){
   ctx.beginPath();
   ctx.fillStyle = Bälle[i].Farbe;
   ctx.arc(Bälle[i].x,Bälle[i].y,RADIUS,0,2*Math.PI,true);
   ctx.fill();
   ctx.closePath();
  }
 }
 
 //Aktualisiere die Ballbewegungsfunktion updateBalls(){
  //Aktualisiere die Dynamik der Bälle im Speicherarray for(var i=0;i<balls.length;i++){
   Bälle[i].x += Bälle[i].vx;
   Bälle[i].y += Bälle[i].vy;
   Bälle[i].vy += Bälle[i].g;
   
   //Kantenkollisionserkennung if(balls[i].y>=CANVAS_HEIGHT-RADIUS){
    Bälle[i].y=CANVAS_HÖHE-RADIUS;
    //Kollisionsrückprall und Widerstand simulieren balls[i].vy=-balls[i].vy*0.6;
   }
  }
  //Wenn der Ball aus der Leinwand rollt, kann er aus dem Array gelöscht werden. Folgendes ist der Löschalgorithmus //Speichern Sie die Anzahl der Bälle, die behalten werden sollen var numBall = 0;
  für(var i=0;i<balls.length;i++){
   wenn(balls[i].x+RADIUS>0&&balls[i].x-RADIUS<CANVAS_WIDTH){
    //Wenn festgestellt wird, dass sich der aktuelle Ball auf dem Bildschirm befindet, bewege den Ball so weit wie möglich nach vorne. Nach jeder Schleife ist der Ball am Ende des Arrays der Ball, der aus der Leinwand rollt. Bälle [numBall] = Bälle [i];
    AnzahlBall++;
   }
  }
  //Lösche den Ball vom hinteren Ende des Arrays while (balls.length>numBall) {
   Bälle.pop();
  }
 }
};

Effektbild:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

HTML5 Canvas js (Digitaluhr) Beispielcode
JS+Canvas zeichnet Uhreffekt
js Canvas realisiert runde Uhr Tutorial
JS+Canvas zeichnet dynamische Uhreffekte
JavaScript kombiniert mit Canvas zur Realisierung einer einfachen Runduhr
js+html5 implementiert die Canvas-Zeichnungs-Web-Clock-Methode
JavaScript HTML5 Canvas zeichnet Uhreffekt
Zusammenfassung des JavaScript-Lernens: Verwenden von Canvas zum Zeichnen einer „Doraemon“-Uhr
JS+H5 Canvas zum Erzielen eines Uhreffekts
js Canvas zeichnet einen kreisförmigen Uhreffekt

<<: XHTML-Tags sollten richtig verwendet werden

>>: Detaillierte Erläuterung der MySQL-Benutzervariablen und Set-Anweisungsbeispiele