Use canvas to make clock implementation steps

For H5, canvas is a more distinctive place. We can use canvas to draw various graphics and make some dynamic games. Today I will teach you how to make a small clock using canvas.

So first of all, I used two canvases on this page, one to draw the static clock dial and scale, and the other to draw the three hands of the clock, and then used positioning to make them overlap. Then there is nothing to say here, the code is attached below.

JavaScript Code copy content to the clipboard

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

Here we arePreparation work is done, now we are ready to draw the clock. I first defined a constructor that draws the clock face.

JavaScript Code Copy content to the clipboard

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

The most important part here should be to obtain the coordinates of the scale and digital drawing. I placed the starting point of the scale on the edge of the dial, then subtracted the length of the scale from the radius of the dial to get the location of the end point of the scale, and then used angles and trigonometric functions to get the coordinates of the two points. Finally, you can draw the scale of the dial. The same method is used to draw the numbers on the dial below. I put the center of the dial here at (200,200). At this point we have drawn a static clock face.

Below I define a constructor for drawing the clock pointer.

JavaScript CodeCopy content to the clipboard

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

There are two places that need to be mentioned here: 1. When we get the milliseconds of the current time and then convert it to hours, for 24 When taking the modulo to calculate the number of hours of the day, you need to add 8 here. 2. If you want to use the lineCap attribute, then do not use closePath() when setting the path above.

At this point we also need a method to draw the pointer and make it look like it can rotate:

JavaScript Code copy content to the clipboard

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

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Implementation steps of using Js to operate HTTP Cookies

Detailed introduction to Js operating BOM object model

Detailed introduction about local Web-storage storage

The above is the detailed content of Use canvas to make clock implementation steps. For more information, please follow other related articles on the PHP Chinese website!