Utilisez le canevas HTML5 pour obtenir un effet d'horloge sympa

Pour H5, le canevas peut être considéré comme sa caractéristique la plus distinctive. Avec lui, nous pouvons librement dessiner divers graphiques sur la page Web, créer de petits jeux, etc. Il existe de nombreux tutoriels sur l’utilisation de la balise canvas sur Internet, je ne les présenterai donc pas ici. Aujourd'hui, nous allons utiliser de la toile pour fabriquer une petite horloge.

Alors tout d'abord, j'ai utilisé deux toiles sur cette page, une pour dessiner le cadran et les échelles de l'horloge statique, et l'autre pour dessiner les trois aiguilles de l'horloge, puis j'ai utilisé le positionnement pour les faire se chevaucher. Alors il n'y a rien à dire ici, le code est joint ci-dessous.

<canvas id="plate">   

            画表盘   

    </canvas>   

    <canvas id="needles">   

            画时针   

    </canvas>

var plate=document.getElementById('plate');   

    var needles=document.getElementById('needles');   

    needles.setAttribute('style','position:absolute;top:8px;left:8px;');  //这里因为chrome里面，body的magin值为8px，所以我这里就没设为0了。   

    var cntP=plate.getContext('2d');   

    var cntH=needles.getContext('2d');   

    plate.width=800;   

    plate.height=500;   

    needles.width=800;   

    needles.height=500;

Maintenant que nous sommes là, les préparatifs sont terminés, et maintenant nous sont prêts à dessiner l'horloge. J'ai d'abord défini un constructeur qui dessine le cadran de l'horloge.

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

La partie la plus importante ici devrait être d'obtenir les coordonnées de l'échelle et du dessin numérique. J'ai placé le point de départ de l'échelle sur le bord du cadran, puis j'ai soustrait la longueur de l'échelle du rayon du cadran pour obtenir l'emplacement du point final de l'échelle, puis j'ai utilisé des angles et des fonctions trigonométriques pour obtenir le coordonnées des deux points. Enfin, vous pouvez dessiner l'échelle du cadran. La même méthode est utilisée pour dessiner les chiffres sur le cadran ci-dessous. Le centre du cadran est ici placé à (200 200). À ce stade, nous avons dessiné un cadran d’horloge statique.

Ci-dessous, je définis un constructeur pour dessiner les aiguilles d'une horloge.

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

                }   

            }

Il y a deux choses qui doivent être dites ici : 1. Lorsque nous obtenons les millisecondes de l'heure actuelle et que nous les convertissons ensuite en heures, Lorsque vous prenez modulo 24 pour calculer le nombre d'heures de la journée, vous devez en ajouter 8 ici. 2. Si vous souhaitez utiliser l'attribut lineCap, n'utilisez pas closePath() lors de la définition du chemin ci-dessus.

À ce stade, nous avons également besoin d'une méthode pour dessiner le pointeur et lui donner l'impression qu'il peut tourner :

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

Ci-joint ci-dessous Image de l'horloge :

Ce qui précède est le contenu de l'utilisation du canevas HTML5 pour obtenir un effet d'horloge sympa. Pour plus de contenu connexe, veuillez faire attention. sur le site Web PHP chinois (www.php.cn) !