Leinwand-Animationsuhr

Ich lerne kürzlich Canvas und habe dann eine animierte Uhr basierend auf dem Beispiel auf MDN erstellt (warum ein Rad bauen, weil es hässlich ist...)

Dies ist ein Beispiel auf MDN, wie Sollte ich sagen, es ist eher retro.

Suchen Sie zunächst ein Bild einer Uhr, das unten abgebildet ist.

——von der Dribbble-Website von größer als größer, Bildquelle (gelöscht)

Dann habe ich angefangen, Leinwand zu verwenden Setzen Sie dies um. Eine Uhr voller Stil. Fügen Sie den Canvas-Tag

<canvas id="canvas" width="400" height="400"></canvas>

in den HTML-Code ein, um den Canvas in der JS-Datei zu erstellen (vorausgesetzt, wir verwenden moderne Browser).

function clock() {
  var ctx = document.getElementById('canvas').getContext('2d');
}

Lassen Sie uns zuerst das Zifferblatt zeichnen. Wir sehen, dass dieses Bild Licht- und Schatteneffekte hat. Es ist zu schwierig, dasselbe zu zeichnen. Deshalb habe ich Farbverläufe verwendet, um die Uhr etwas dreidimensionaler wirken zu lassen. Verwenden Sie „createLinearGradient“ im Canvas, um einen neuen Farbverlauf zu erstellen, ihn mit „addColorStop“ einzufärben und schließlich die Farbe „StrokeStyle“ zuzuweisen. Einzelheiten finden Sie unter Verwenden von Stilen und Farben von MDN

//绘制表盘底色
ctx.translate(200, 200); //将坐标原点移到画布中心
ctx.rotate(-Math.PI/2); //将坐标轴逆时针旋转90度，x轴正方向对准12点方向
var lingrad = ctx.createLinearGradient(150, 0, -150, 0);
lingrad.addColorStop(0, '#242f37');
lingrad.addColorStop(1, '#48585c');
ctx.fillStyle = lingrad;
ctx.beginPath();
ctx.arc(0, 0, 150, 0, Math.PI * 2, true);
ctx.fill();

Der entscheidende Punkt ist, dass die positive Richtung der x-Achse der Leinwand die 3-Uhr-Richtung der Uhr ist. Der Einfachheit halber haben wir Drehen Sie es um 90 Grad gegen den Uhrzeigersinn. Es zeigt auf zwölf Uhr.

Um Skalen zu zeichnen, wird Rotieren (Transformationen durch MDN) verwendet. Es gibt 12-Stunden-Skalen. Der Winkel zwischen zwei benachbarten Skalen und dem Mittelpunkt des Kreises beträgt Math.PI/6, ausgedrückt im Bogenmaß. , also 30 Grad. Dann verwenden wir eine for-Schleife, um die Stundenskala zu zeichnen.

for (var i = 0; i < 12; i++) {
  ctx.beginPath();
  ctx.strokeStyle = &#39;#fff&#39;;
  ctx.lineWidth = 3;
  ctx.rotate(Math.PI / 6);
  ctx.moveTo(140, 0);
  ctx.lineTo(120, 0);
  ctx.stroke();
}

Auch die Minutenskala ist dieselbe.

ctx.beginPath();
for (i = 0; i < 60; i++) {
  if (i % 5 !== 0) { //去掉与小时刻度重叠的部分
    ctx.beginPath();
    ctx.strokeStyle = &#39;#536b7a&#39;;
    ctx.lineWidth = 2;
    ctx.moveTo(140, 0);
    ctx.lineTo(130, 0);
    ctx.stroke();
  }
  ctx.rotate(Math.PI / 30);
}

Das Zifferblatt ist grob gezeichnet und die Skalen sind gezeichnet. Der nächste Schritt besteht darin, den Zeiger zu zeichnen und ihn auf die richtige Zeit zu zeigen, oder? Ist es nicht einfach nur eine gerade Linie zu zeichnen? Der Schlüssel ist, in welchem ​​Winkel sich der Zeiger dreht. Tatsächlich ist es relativ einfach. Ermitteln Sie zunächst die aktuelle Uhrzeit und konvertieren Sie die Stunde in das 12-Stunden-Format.

var now = new Date(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hr = now.getHours();
hr = hr > 12 ? hr - 12 : hr;

Dann ist die Position des Stundenzeigers (der Winkel relativ zur positiven Richtung der x-Achse):

ctx.rotate(hr * (Math.PI / 6) + min * (Math.PI / 360) + sec * (Math.PI / 21600));

Ebenso die Position des Minutenzeigers Zeiger und Sekundenzeiger:

ctx.rotate(min * (Math.PI / 30) + sec * (Math.PI/1800));
 //分针ctx.rotate(sec * (Math.PI /30)); //秒针

Das Wichtigste ist schließlich, den Zeiger rotieren zu lassen. Die requestAnimationFrame-Methode wird hier verwendet, um die Seite neu zu zeichnen, um eine kohärente Bild-für-Bild-Animation zu erreichen bester Animationseffekt.

window.requestAnimationFrame(callback);

Dieser Rückruf ist unsere Funktion clock() zum Zeichnen der Uhr. Es ist zu beachten, dass die Leinwand nach jeder Ausführung von requestAnimationFrame gelöscht werden muss, da es sonst zu Überlappungen und Verschachtelungen kommt. Wir stellen sie an den Anfang der Uhrfunktion.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Zu diesem Zeitpunkt ist die animierte Uhr in Ordnung. Das Rendering ist wie folgt:

Demoadresse http://codepen.io/. lifeng1893/pen/ ALPamR