Verwenden Sie Canvas, um Schritte zur Uhrenimplementierung durchzuführen

Für H5 ist Canvas ein markanterer Ort. Wir können Canvas verwenden, um verschiedene Grafiken zu zeichnen und einige dynamische Spiele zu erstellen. Heute werde ich Ihnen beibringen, wie man aus Leinwand eine kleine Uhr bastelt.

Also habe ich auf dieser Seite zunächst zwei Leinwände verwendet, eines zum Zeichnen des statischen Zifferblatts und der Skalen der Uhr und das andere zum Zeichnen der drei Zeiger der Uhr, und dann die Positionierung verwendet, um sie überlappen zu lassen. Dann gibt es hier nichts zu sagen, der Code ist unten angehängt.

JavaScript Code kopiert den Inhalt in die Zwischenablage

<canvas id="plate">   
        画表盘   
</canvas>   
<canvas id="needles">   
        画时针   
var plate=document.getElementById(&#39;plate&#39;);   
var needles=document.getElementById(&#39;needles&#39;);   
needles.setAttribute(&#39;style&#39;,&#39;position:absolute;top:8px;left:8px;&#39;);  //这里因为chrome里面，body的magin值为8px，所以我这里就没设为0了。   
var cntP=plate.getContext(&#39;2d&#39;);   
var cntH=needles.getContext(&#39;2d&#39;);   
plate.width=800;   
plate.height=500;   
needles.width=800;   
needles.height=500;

Hier sind wir.Die Vorbereitungsarbeiten sind abgeschlossen, jetzt sind wir bereit Zeichne die Uhr. Ich habe zunächst einen Konstruktor definiert, der das Zifferblatt zeichnet.

JavaScript-Code kopiert Inhalte in die Zwischenablage

function drawclock(cnt,radius,platelen,linewidth,numLen,NUMLEN){   
            this.cnt=cnt;   
            this.radius=radius;   
            this.platelen=platelen;   
            this.linewidth=linewidth;   
            this.numLen=numLen;   
            this.NUMLEN=NUMLEN;   
            this.getCalibCoor=function(i){     
                //获得表盘刻度两端的坐标   
                var X=200+this.radius*Math.sin(6*i*Math.PI/180);   
                var Y=200-this.radius*Math.cos(6*i*Math.PI/180);   
                var x=200+(this.radius-this.platelen)*Math.sin(6*i*Math.PI/180);   
                var y=200-(this.radius-this.platelen)*Math.cos(6*i*Math.PI/180);   
  
                // 获得分钟数字的坐标   
                var numx=200+(this.radius-this.platelen-this.numLen)*Math.sin(6*i*Math.PI/180);   
                var numy=200-(this.radius-this.platelen-this.numLen)*Math.cos(6*i*Math.PI/180);   
                //获得小时数字的坐标   
                var numX=200+(this.radius-this.platelen-this.NUMLEN)*Math.sin(6*i*Math.PI/180);     
                var numY=200-(this.radius-this.platelen-this.NUMLEN)*Math.cos(6*i*Math.PI/180);   
                return {X:X,Y:Y,x:x,y:y,numx:numx,numy:numy,numX:numX,numY:numY};   
            };   
            this.drawCalibration=function(){ //画刻度   
                for(var i=0,coorObj;i<60;i++){   
                    coorObj=this.getCalibCoor(i);   
                    this.cnt.beginPath();   
                    this.cnt.moveTo(coorObj.X,coorObj.Y);   
                    this.cnt.lineTo(coorObj.x,coorObj.y);   
                    this.cnt.closePath();   
  
                    this.cnt.lineWidth=this.linewidth;   
                    this.cnt.strokeStyle=&#39;#ddd&#39;;   
                    i%5==0&&(this.cnt.strokeStyle=&#39;#aaa&#39;)   
                    &&(this.cnt.lineWidth=this.linewidth*2);   
                    i%15==0&&(this.cnt.strokeStyle=&#39;#999&#39;)   
                    &&(this.cnt.lineWidth=this.linewidth*3);   
                    this.cnt.stroke();   
  
                    this.cnt.font=&#39;10px Arial&#39;;   
                    this.cnt.fillStyle=&#39;rgba(0,0,0,.2)&#39;;   
                    this.cnt.fillText(i,coorObj.numx-7,coorObj.numy+3);   
                    i%5==0&&(this.cnt.fillStyle=&#39;rgba(0,0,0,.5)&#39;)   
                        &&(this.cnt.font=&#39;18px Arial&#39;)   
                        &&(this.cnt.fillText(i/5,coorObj.numX-5,coorObj.numY+5));   
                }   
            };   
        }   
　　　　　　var clock=new drawclock(cntP,200,5,1,10,25); //实例化一个表盘对象   
　　　　　　clock.drawCalibration();

Der wichtigste Teil hier sollte darin bestehen, die Koordinaten des Maßstabs und der digitalen Zeichnung zu erhalten. Ich habe den Startpunkt der Skala am Rand des Zifferblatts platziert, dann die Länge der Skala vom Radius des Zifferblatts subtrahiert, um die Position des Endpunkts der Skala zu erhalten, und dann Winkel und trigonometrische Funktionen verwendet, um das zu erhalten Koordinaten der beiden Punkte. Zum Schluss können Sie die Skala des Zifferblatts zeichnen. Die gleiche Methode wird zum Zeichnen der Zahlen auf dem Zifferblatt unten verwendet. Die Mitte des Zifferblatts liegt hier bei (200.200). An dieser Stelle haben wir ein statisches Zifferblatt gezeichnet.

Nachfolgend definiere ich einen Konstruktor zum Zeichnen des Uhrzeigers.

JavaScript-Code kopiert Inhalte in die Zwischenablage

function clockNeedle(cnt,R,lineWidth,strokeStyle,lineCap,obj){   
            this.R=R;   
            this.cnt=cnt;   
            this.lineWidth=lineWidth;   
            this.strokeStyle=strokeStyle;   
            this.lineCap=lineCap;   
            this.obj=obj;   
            this.getNeedleCoor=function(i){   
                var X=200+this.R*0.8*Math.sin(i); //起点的坐标   
                var Y=200-this.R*0.8*Math.cos(i);   
  
                var x=200-20*Math.sin(i); //终点的坐标   
                var y=200+20*Math.cos(i);   
                return {X:X,Y:Y,x:x,y:y};   
            };   
            this.drawNeedle=function(){   
                var d=new Date().getTime();   
                var angle;   
                switch(this.obj){   
                    case 0:   
                    angle=(d/3600000%24+8)/12*360*Math.PI/180;   
                    break;   
                    case 1:   
                    angle=d/60000%60/60*360*Math.PI/180;   
                    break;   
                    case 2:   
                    angle=d/1000%60/60*360*Math.PI/180;   
                    break;   
                }   
                var coorobj=this.getNeedleCoor(angle);   
                this.cnt.beginPath();   
                this.cnt.moveTo(coorobj.x,coorobj.y);   
                this.cnt.lineTo(coorobj.X,coorobj.Y);   
                // this.cnt.closePath();   
  
                this.cnt.lineWidth=this.lineWidth;   
                this.cnt.strokeStyle=this.strokeStyle;   
                this.cnt.lineCap=this.lineCap;   
                this.cnt.stroke();   
            }   
        }

Hier müssen zwei Stellen erwähnt werden: 1. Wenn wir die Millisekunden der aktuellen Zeit erhalten und sie dann in Stunden umwandeln , Wenn Sie Modulo 24 verwenden, um die Anzahl der Stunden des Tages zu berechnen, müssen Sie hier 8 hinzufügen. 2. Wenn Sie das lineCap-Attribut verwenden möchten, verwenden Sie beim Festlegen des Pfads oben nicht closePath().

An dieser Stelle benötigen wir auch eine Methode, um den Zeiger zu zeichnen und ihn so aussehen zu lassen, als könne er sich drehen:

JavaScript-Code zum Kopieren von Inhalten in die Zwischenablage

function draw(){   
            cntH.clearRect(0,0,needles.width,needles.height);   
            var mzneedle=new clockNeedle(cntH,200,1,'rgba(0,0,0,.5)','round',2);   
            //最后一个参数0代表画时针，1画分针，2画秒针   
            var fzneedle=new clockNeedle(cntH,80,3,'rgba(0,0,0,.4)','round',0);   
            var szneedle=new clockNeedle(cntH,140,2,'rgba(0,0,0,.3)','round',1);   
            mzneedle.drawNeedle();   
            fzneedle.drawNeedle();   
            szneedle.drawNeedle();   
            cntH.arc(200,200,5,0,2*Math.PI);   
            cntH.fillStyle='rgba(0,0,0,.5)';   
            cntH.fill();   
 }   
 setInterval(draw,1);

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Implementierungsschritte für die Verwendung von Js zum Betreiben von HTTP-Cookies

Detaillierte Einführung in das BOM-Objektmodell von Js

Ausführliche Einführung zum lokalen Web-Storage

Das obige ist der detaillierte Inhalt vonVerwenden Sie Canvas, um Schritte zur Uhrenimplementierung durchzuführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!