Heim > Web-Frontend > HTML-Tutorial > Leinwand-Animationsuhr

Leinwand-Animationsuhr

高洛峰
Freigeben: 2016-11-08 14:38:45
Original
1462 Leute haben es durchsucht

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.

Leinwand-Animationsuhr

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

Leinwand-Animationsuhr

——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>
Nach dem Login kopieren

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(&#39;canvas&#39;).getContext(&#39;2d&#39;);
}
Nach dem Login kopieren

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, &#39;#242f37&#39;);
lingrad.addColorStop(1, &#39;#48585c&#39;);
ctx.fillStyle = lingrad;
ctx.beginPath();
ctx.arc(0, 0, 150, 0, Math.PI * 2, true);
ctx.fill();
Nach dem Login kopieren

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();
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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;
Nach dem Login kopieren

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));
Nach dem Login kopieren

Ebenso die Position des Minutenzeigers Zeiger und Sekundenzeiger:

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

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);
Nach dem Login kopieren

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);
Nach dem Login kopieren

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

Leinwand-Animationsuhr

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


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage