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:
|
<<: XHTML-Tags sollten richtig verwendet werden
>>: Detaillierte Erläuterung der MySQL-Benutzervariablen und Set-Anweisungsbeispiele
Artikel empfehlen
Detaillierte Erläuterung des Linux-CRM-Bereitstellungscodes
Linux-Grundkonfiguration Kompilieren und installi...
Das Problem und die Lösung bei der Verwendung von Docker-Speicher und dem Verursachen von Exit, bei dem das Hochladen von Dateien auf den Server fehlschlägt
1. Problembeschreibung Der im Docker-Container in...
So zeigen Sie allgemeine Symbole auf dem Desktop in Windows Server 2012 an oder verbergen sie
Windows Server 2012 und Windows Server 2008 unter...
Docker erstellt eine Jenkins+Maven-Plattform zum Erstellen und Bereitstellen von Code
Inhaltsverzeichnis Grundlegende Konzepte von Dock...
Probleme und Lösungen bei der Verwendung der jsx-Syntax in React-vscode
Problembeschreibung Nach der Installation des Plu...
TinyEditor ist ein einfacher und benutzerfreundlicher HTML-WYSIWYG-Editor
Vor einigen Tagen habe ich Ihnen einen inländisch...
25 erweiterte Verwendungsmöglichkeiten von JS Array Reduce, die Sie kennen müssen
Vorwort Reduce ist eine der neuen herkömmlichen A...
Zusammenfassung gängiger Docker-Befehle (empfohlen)
1. Zusammenfassung: Im Allgemeinen können sie in ...
js, um ein Wasserfall-Flusslayout zu erreichen (unendliches Laden)
In diesem Artikelbeispiel wird der spezifische Co...
Vue+js realisiert Video-Ein- und Ausblendeffekte
Vue+js realisiert das Ein- und Ausblenden des Vid...
Eine kurze Erläuterung der Situationen in MySQL, die zu Indexfehlern führen
Hier einige Tipps von Ausbildungsstätten und mein...
Erstellen privater Mitglieder in JavaScript
Inhaltsverzeichnis 1. Verwende Closures 2. Verwen...
Umfassende Zusammenfassung zu MySQL GTID
Inhaltsverzeichnis 01 Einführung in GTID 02 Wie G...
Vue implementiert horizontales Scrollen von Text im Laufschriftstil
In diesem Artikel wird der spezifische Code für V...
So implementieren Sie die Vue-Bindungsklasse und den Inline-Bindungsstil
Inhaltsverzeichnis Bindungsklasse Inline-Stile bi...