Heim >Web-Frontend >js-Tutorial >Verwenden Sie Canvas, um die Uhrrotation zu implementieren
Wir alle haben Uhren auf unseren Desktops. Der Effekt ist wie folgt:
//3d绘制环境还不是很稳定var ogc=oc.getContext("2d");Zeichne ein Rechteck
ogc.strokeRect(x,ywidth,height);Zeichne eine gerade Linie
ogc.orc(x,y,半径,0,要转的角度,是否为顺时针false);Dies schreiben Im kleinen Fall werden der Stundenzeiger, der Minutenzeiger und der Sekundenzeiger durch Zeichnen eines Kreises gezeichnet, aber der Drehwinkel zwischen ihnen beträgt 0.
ogc.moveTo(10,10);ogc.lineTo(10,50);ogc.stroke();Im Allgemeinen muss es einen geben Anfang und Ende:
//画小时 用画圆的方法来画,从0度到0度,中间转动的角度为0 ogc.beginPath(); ogc.lineWidth=4;//线的粗细 ogc.moveTo(x,y); ogc.arc(x,y,r*(15/20),hourvalue,hourvalue,false); ogc.closePath(); //stroke()一定要有,不然页面上就什么也没有 ogc.stroke();2. Tipps im Koffer
ogc.beginPath(); 。。。。。。 ogc.closePath();
Wenn Sie die Dicke der Linie festlegen möchten, verwenden Sie ogc.lineWidth=value; Das Wichtigste ist, wie man ihn bewegt. Hier wird ein Timer verwendet, und der Sekundenzeiger bewegt sich jede Sekunde um eine Markierung (6 Grad), aber wir müssen zuerst die Systemzeit und dann die Stunden und Minuten ermitteln , und Sekunden.
Die Position des Stundenwerts, des Minutenwerts und des Sekundenwerts, an der der Stundenzeiger, der Minutenwert und der Sekundenzeiger Linien zeichnen.
Das obige ist der detaillierte Inhalt vonVerwenden Sie Canvas, um die Uhrrotation zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!