Heim > Artikel > Web-Frontend > Beispielcode zum Zeichnen einer animierten Uhr auf Leinwand

Beispielcode zum Zeichnen einer animierten Uhr auf Leinwand

巴扎黑Original: 2017-07-24 14:31:301530Durchsuche

Heute habe ich viel Zeit, deshalb möchte ich aus einer Laune heraus ein kleines Beispiel von HTML5 mit Ihnen teilen. Ich hoffe, den „Kinderschuhen“, die gerade HTML5 gelernt haben oder noch nicht gelernt haben, einen kleinen Fall zu zeigen html5 und bin dabei, es zu lernen. Ich hoffe, es wird Ihnen beim Lernen helfen. Was für ein Meister! Bitte überspringen Sie es!

Ich habe es ausprobiert und eine Uhr gezeichnet, die sich etwas vom MDN-Beispiel unterscheidet. Ich arbeite es alleine!

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>Title</title>
</head><body onload="draw()">
<canvas id="canvas" width="300" height="300">
</canvas>
<script>
function init()
{
var ctx = document.getElementById('canvas').getContext('2d');

        ctx.save();
        ctx.clearRect(0,0,300,300);
        ctx.translate(150,150);
        ctx.lineWidth = 4;
        ctx.strokeStyle = "#a77";
        ctx.beginPath();
        ctx.arc(0,0,100,0,Math.PI*2,true);
        ctx.stroke();
        ctx.rotate(-Math.PI/2);//minute mark        ctx.save();for(var i = 0;i<60;i++){if(i%5 != 0){
                ctx.beginPath();
                ctx.moveTo(90,0);
                ctx.lineTo(94,0);
                ctx.stroke();
            }
            ctx.rotate(Math.PI/30);        }
        ctx.restore();//hour mark        ctx.save();for(var i=1;i<=12;i++){
            ctx.beginPath();
            ctx.moveTo(85,0);
            ctx.lineTo(95,0);
            ctx.stroke();
            ctx.rotate(Math.PI/6);        }
        ctx.restore();
        window.requestAnimationFrame(clock);
    }function clock() {var ctx = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);var now = new Date();var sec = now.getSeconds();var min = now.getMinutes();var hr = now.getHours();
        hr = hr>=12 ? hr-12 : hr;

        ctx.beginPath();
        ctx.arc(0,0,82,0,Math.PI*2,false);
        ctx.clip();
        ctx.clearRect(-90,-90,180,180);//write hour        ctx.save();
        ctx.lineWidth = 6;
        ctx.rotate(hr*Math.PI/6 + min*Math.PI/360 + sec*Math.PI/21600);        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(50,0);
        ctx.stroke();
        ctx.restore();//write minute        ctx.save();
        ctx.lineWidth = 3;
        ctx.rotate(min*Math.PI/30 + sec*Math.PI/1800);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(65,0);
        ctx.stroke();
        ctx.restore();//write second        ctx.save();
        ctx.lineWidth = 1;
        ctx.rotate(sec*Math.PI/30);        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(80,0);
        ctx.stroke();
        ctx.restore();

        window.requestAnimationFrame(clock);
    }

    init();
    </script>
    </body>
    </html>

Code anzeigen

Hier ist eine Beispielseite von MDN: Klicken Sie auf mich, klicken Sie auf mich

Der Unterschied zum MDN-Beispiel besteht darin, dass MDN jedes Mal die gesamte Uhr neu zeichnen muss, während mein Ansatz das Zifferblatt und die drei Zeiger trennt und nur die Zeiger neu zeichnen muss.

Ich denke, hier gibt es zwei Schwierigkeiten: Die eine besteht darin, den Winkel des Stunden- und Minutenzeigers zu berechnen (wenn sich der Minutenzeiger bewegt, bewegt sich auch der Stundenzeiger in einem bestimmten Winkel). Einer davon ist der Bereich, in dem der Zeiger neu gezeichnet wird.

canvasRendingContext2D.rotate(angle)

Hier ist Math.PI ein Halbkreis, und der Halbkreis hat 6 Stunden, also Math .PI /6 ist der Bogen, den der Stundenzeiger in einer Stunde zurücklegt.

Da der Minutenzeiger eine Umdrehung durchführt, vollendet der Stundenzeiger 1/12 einer Umdrehung, sodass der vom Stundenzeiger relativ zur Minute zurückgelegte Bogen wie folgt berechnet werden kann: Math.PI*2/60 *12 =>Math.PI /360

Der Sekundenzeiger ist derselbe.

Zweitens: Zeichnen Sie den Zeiger neu.

Wenn Sie die Zeiger nicht neu zeichnen, erhalten Sie nach 1 Minute eine Uhr voller 360-Grad-Sekundenzeiger. So:

Wie können wir also den Bereich des Zeigerteils neu zeichnen?

Ich habe über das Zuschneiden nachgedacht. Zeichnen Sie dann den beschnittenen Bereich neu.

Das ist es! (La la la la la, tanzen la la la la~~~)

Das obige ist der detaillierte Inhalt vonBeispielcode zum Zeichnen einer animierten Uhr auf Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Ideen zum verzögerten Laden von js und Erklärung zum verzögerten Laden auf dem ersten BildschirmNächster Artikel：Ideen zum verzögerten Laden von js und Erklärung zum verzögerten Laden auf dem ersten Bildschirm

In Verbindung stehende Artikel

Mehr sehen