Verwenden Sie HTML5-Canvas, um einen coolen Uhreffekt zu erzielen-H5-Tutorial-php.cn

Verwenden Sie HTML5-Canvas, um einen coolen Uhreffekt zu erzielen

黄舟

Freigeben： 2017-02-23 14:25:56

Original

2375 Leute haben es durchsucht

Für H5 kann man sagen, dass Canvas das herausragendste Merkmal ist. Damit können wir verschiedene Grafiken auf der Webseite frei zeichnen, einige kleine Spiele erstellen und so weiter. Es gibt viele Tutorials zur Verwendung des Canvas-Tags im Internet, daher werde ich sie hier nicht vorstellen. Heute werden wir aus Leinwand eine kleine Uhr basteln.

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.

<canvas id="plate">   

            画表盘   

    </canvas>   

    <canvas id="needles">   

            画时针   

    </canvas>

Nach dem Login kopieren

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;

Nach dem Login kopieren

Jetzt, wo wir hier sind, sind die Vorbereitungen abgeschlossen, und jetzt sind wir dran sind bereit, die Uhr zu zeichnen. Ich habe zunächst einen Konstruktor definiert, der das Zifferblatt zeichnet.

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();

Nach dem Login kopieren

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. Ich habe die Mitte des Zifferblatts hier auf (200.200) gesetzt. An dieser Stelle haben wir ein statisches Zifferblatt gezeichnet.

Nachfolgend definiere ich einen Konstruktor zum Zeichnen des Uhrzeigers.

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();   

                }   

            }

Nach dem Login kopieren

Hier müssen zwei Dinge gesagt werden: 1. Wenn wir die Millisekunden der aktuellen Zeit erhalten und sie dann in Stunden umwandeln, Bei der Berechnung der Tagesstunden mit Modulo 24 muss hier 8 hinzugefügt werden. 2. Wenn Sie das lineCap-Attribut verwenden möchten, verwenden Sie beim Festlegen des Pfads oben nicht closePath().

An diesem Punkt benötigen wir auch eine Methode, um den Zeiger zu zeichnen und ihn so aussehen zu lassen, als ob er sich drehen könnte:

function draw(){   

                cntH.clearRect(0,0,needles.width,needles.height);   

                var mzneedle=new clockNeedle(cntH,200,1,&#39;rgba(0,0,0,.5)&#39;,&#39;round&#39;,2);   

                //最后一个参数0代表画时针，1画分针，2画秒针   

                var fzneedle=new clockNeedle(cntH,80,3,&#39;rgba(0,0,0,.4)&#39;,&#39;round&#39;,0);   

                var szneedle=new clockNeedle(cntH,140,2,&#39;rgba(0,0,0,.3)&#39;,&#39;round&#39;,1);   

                mzneedle.drawNeedle();   

                fzneedle.drawNeedle();   

                szneedle.drawNeedle();   

                cntH.arc(200,200,5,0,2*Math.PI);   

                cntH.fillStyle=&#39;rgba(0,0,0,.5)&#39;;   

                cntH.fill();   

     }   

     setInterval(draw,1);

Nach dem Login kopieren

unten angehängt Bild der Uhr:

Verwenden Sie HTML5-Canvas, um einen coolen Uhreffekt zu erzielen

Das Obige ist der Inhalt der Verwendung von HTML5-Canvas, um einen coolen Uhreffekt zu erzielen. Bitte achten Sie darauf zur chinesischen PHP-Website (m.sbmmt.com)!