HTML5-Zeichnungsuhranimation_html5-Tutorial-Fähigkeiten

Code kopieren

Der Code lautet wie folgt:

var clock=document.getElementById ("clock");
var cxt=clock.getContext("2d");
function drawNow(){
var now=new Date();
varhour=now.getHours( );
var min=now.getMinutes();
var sec=now.getSeconds();
Stunde=Stunde>12?Stunde-12:Stunde;
Stunde=Stunde min/60 ;
//Wählen (blau)
cxt.lineWidth=10;
cxt.StrokeStyle="blue"
cxt.beginPath();
cxt.arc(250,250,200,0,360,false );
cxt.closePath();
cxt.Stroke();
//Scale
//Zeitskala
for(var i=0;i<12;i ){
cxt.save();
cxt.lineWidth=7;
cxt.StrokeStyle="black";
cxt.translate(250,250);
cxt.rotate(i*30* Math. PI/180);//Rotationswinkel*Math.PI/180=radians
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0, - 190);
cxt.closePath();
cxt.Stroke();
cxt.restore();
}
//Score
for(var i=0 ;i<60;i ){
cxt.save();
//Legen Sie die Dicke der Unterskalen fest
cxt.lineWidth=5;
//Setzen Sie den Leinwandursprung zurück
cxt. translator(250,250);
//Drehwinkel einstellen
cxt.rotate(i*6*Math.PI/180);
//Minutenzeigerskala zeichnen
cxt. StrokeStyle="black";
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke ();
cxt.restore();
}
//Stundenzeiger
cxt.save();
// Stundenzeigerstil festlegen
cxt.lineWidth=7;
cxt.StrokeStyle="black";
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt .beginPath();
cxt .moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.Stroke();
cxt.restore();
//Minutenzeiger
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="black";
//Setze die Mitte der Minutenzeiger-Leinwand in verschiedenen Abmessungen
cxt .translate(250,250);
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt .moveTo(0,-160);
cxt .lineTo(0,15);
cxt.closePath();
cxt.Stroke()
cxt.restore();
//Sekundenzeiger
cxt.save();
//Legen Sie den Stil des Sekundenzeigers fest
//Farbe: Rot
cxt.StrokeStyle="red";
cxt.lineWidth =3;
//den Ursprung zurücksetzen
cxt.translate (250,250);
//den Winkel einstellen
//cxt.rotate(330*Math.PI/180);
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.Stroke();
//Zeichne den Schnittpunkt von Stundenzeiger, Minutenzeiger und Sekundenzeiger
cxt.beginPath();
cxt.arc( 0,0,5,0,360,false);
cxt.closePath();
//Füllung festlegen
cxt.fillStyle="gray";
cxt.fill();
//cxt.StrokeStyle="red";
cxt.Stroke();
//Zeichne den kleinen Punkt für den Sekundenzeiger
cxt.beginPath();
cxt.arc(0, -140,5,0,360,false);
cxt.closePath();
//Legen Sie die Füllung fest
cxt.fillStyle="gray";
cxt.fill();
//cxt.StrokeStyle="red";
cxt.Stroke();

cxt.restore();

}
function drawClock(){
cxt.clearRect(0,0,500,500);
drawNow();
}
drawNow();
setInterval(drawClock, 1000);