Utilisez Canvas pour effectuer les étapes de mise en œuvre de l'horloge-tutoriel HTML-php.cn

Utilisez Canvas pour effectuer les étapes de mise en œuvre de l'horloge

php中世界最好的语言

Libérer： 2017-12-02 14:08:18

original

2196 Les gens l'ont consulté

Pour H5, la toile est un endroit plus distinctif. Nous pouvons utiliser la toile pour dessiner divers graphiques et créer des jeux dynamiques. Aujourd'hui, je vais vous apprendre à fabriquer une petite horloge en utilisant de la toile.

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.

JavaScript Le code copie le contenu dans le presse-papiers

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

Copier après la connexion

Nous y sommes.Le travail de préparation est terminé, nous sommes maintenant prêts à dessine l'horloge. J'ai d'abord défini un constructeur qui dessine le cadran de l'horloge.

Le code JavaScript copie le contenu dans le presse-papiers

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

Copier après la connexion

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. J'ai mis ici le centre du cadran à (200 200). À ce stade, nous avons dessiné un cadran d’horloge statique.

Ci-dessous, je définis un constructeur pour dessiner le pointeur de l'horloge.

Le code JavaScript copie le contenu dans le presse-papiers

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

Copier après la connexion

Il y a deux endroits qui doivent être mentionnés ici : 1. Lorsque nous obtenons les millisecondes de l'heure actuelle, puis les convertissons en heures , Lorsque vous prenez modulo 24 pour calculer le nombre d'heures de la journée, vous devez 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 pivoter :

Code JavaScript pour copier le contenu dans le presse-papiers

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

Copier après la connexion

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Étapes de mise en œuvre de l'utilisation de Js pour faire fonctionner les cookies HTTP

Introduction détaillée au modèle objet de nomenclature d'exploitation Js

Introduction détaillée sur le stockage Web local

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!