Betrachten wir zunächst die Wirkung der Teilchenuhr wie folgt:
Im Folgenden werden wir es über Canvas und js implementieren.
Erstellen Sie zunächst eine HTML-Datei und fügen Sie wie folgt eine Leinwand hinzu:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Document</title> <style> .container{ margin: 0, auto; width: 600px } </style; ></head><body> <div id=container> <canvas id=canvas></canvas> </div></body>Als nächstes importieren Sie das Material, digit.js. Das Material besteht aus Zahlen mit zweidimensionalen Arrays. Es gibt insgesamt zehn Zeichen: 0-9 und Doppelpunkt, wie folgt:
Sie können sehen, dass sich die Zeichen 1 zusammensetzen
Beginnen wir mit der Erstellung der Leinwand:
function Clock() { var canvas = document.getElementById(canvas); canvas.width = 600; this.cxt = canvas.getContext('2d'); .cxt.fillRect(0, 0, 500, 100);Der obige Code kann eine kleine graue Leinwand im Browser zeichnen
Beginnen wir mit der folgenden Analyse:
1. Verstehen Sie die Datenmatrix? Es ist ein mehrdimensionales Array
2. Wie zeichnet man einen Kreis?
2.1 Muss man zuerst den Radius kennen?
Wie aus der obigen Abbildung ersichtlich ist, sind die Positionen des Kreismittelpunkts:
r+1r+1 + (r+1)*2*1r+1 + (r+1)*2*2. . . r+1 + (r+1)*2*i
Gleichzeitig kann der Radius auch durch Berechnung der Kreishöhe wie folgt ermittelt werden:
Die Höhe eines Kreises beträgt (r+1)*2 und die Höhe der Leinwand besteht aus 10 Kreisen.
Leinwandhöhe = (r+1)*2*10
Wenn die Leinwandhöhe auf 100 eingestellt ist, erscheint r, der Kreismittelpunkt xy erscheint ebenfalls und der Kreis wird gezeichnet.
Fügen Sie zunächst eine Anweisung zum obigen Clock-Objekt hinzu, um r zu berechnen
this.r = 100/20-1;
Als nächstes füge ich die Draw-Methode zum Clock-Prototyp hinzu.
Clock.prototype.draw = function(num, index) { this.cxt.fillStyle=#000; for (let i=0; i<digit[num].length; i++) { for (let j=0; j< digit[num][i].length; j++) { if (digit[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 empfängt 2 Parameter, der erste ist der Zeichenindex, der zweite ist die Zeichenoffsetsequenz, 70 ist ein Offsetabstand, der angepasst werden kann.
Das erste for ruft das zu rendernde Zeichenarray ab. Das zweite for nimmt jede Zeile zum Rendern und rendert sie nur als 1. Die Parameter zum Zeichnen eines Kreises sind hauptsächlich x, y, r.
Als nächstes müssen wir die Zeit vom neuen Datum erhalten, indem wir reguläre Regeln verwenden, wie folgt:
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]); i=0; i<data.length; i++) { this.draw(data[i], i);Sie können die Stunden, Minuten und Sekunden einfach über reguläre Ausdrücke ermitteln. Achten Sie beim Pushen des Arrays auf das entsprechende Format. 10 stellt das 10. Zeichen in digit.js dar, das den Doppelpunkt darstellt.
Beachten Sie, dass beim Malen ein Problem auftritt, das heißt, die Leinwand kann nicht aktualisiert werden. Sie können dies hinzufügen
canvas.height= 100
Jetzt können Sie den Code wie folgt ausführen:
var clock = new Clock();setInterval(()=>{ clock.getTime(); })Okay, das ist in Ordnung
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.