Rendering the dynamic clock H5 canvas-

Use <canvas> element is not very difficult, but requires some basic knowledge of HTML and JavaScript.

Today we use canvas API to draw a clock, first on the map:

 

Prior to drawing, first smoothed over ideas: first break this down clock pattern, which is a dial (circles) and pointers (linear) components.

Large rectangular canvas circular gap, the method does not provide special canvas draw a circle, but can draw an arc, the circular arcs connected end to end to give

arc (x, y, radius, starting arc, the end of the arc, rotation direction)
X, Y center coordinates ---
RADIUS --- radius
relationship radian angle = angle in radians --- * Math.PI / 180
For example: 2π is 360 ° (full circle)
rotation direction --- true: counterclockwise; false: clockwise (default)

After the master Circle Dafa, we can begin construction of:

First prepare the canvas

<canvas id="myClock" width="500" height="500"></canvas>

Next context object Get

var canvas = document.getElementById('myClock');
var con = canvas.getContext('2d');

Decomposition features:

1. The scale on the dial (60 seconds represented scale, represents a 12-hour scale)

1.1 scale 60 seconds -> 360 ° / 60 -> 6 ° a small cell

// definition of origin and radius 
var X = 250 ;
 var Y = 250 ;
 var R & lt = 150 ; 
con.moveTo (X, Y);        
con.arc (X, Y, R & lt, 0,6 Math.PI * / 180 [) ;
 con.moveTo (X, Y); 
con.arc (X, Y, R & lt, . 6 Math.PI * / * Math.PI 180,12 / 180 [ ); 
con.stroke (); 
......

First experiments do little, this will be the above code fragment pattern

 

Use cycle, the above code perfect

// definition of origin and radius 
var X = 250 ;
 var Y = 250 ;
 var R & lt = 150 ;
 // draw the second scale starts 
con.beginPath (); // order not to affect other drawing, with initial path 
for ( var I 0 =; I <60; I ++ ) { 
    con.moveTo (X, Y); // in the center as a starting point 
    con.arc (x, y, r, 6 * i * Math.PI / 180, 6 * (i + . 1) Math.PI * / 180 [); // draw a period of 6 ° arc 
} 
con.closePath (); // order not to affect other drawing, with initial path 
con.stroke ();

At the moment, to give the following pattern

 

How to see how unlike dial blanket? ! To achieve the effect of the second scale, simply covered with a small white solid round to

// small white disk 
con.beginPath (); 
con.moveTo (X, Y); 
con.arc (X, Y, 0.95 R & lt *, 0,2 * Math.PI); 
con.closePath (); 
con.fillStyle = '#fff'; // fill pattern background color 
con.fill (); // closed circles

Now look, regarded as the prototype of the dial out.

The same procedure will be drawn hour scale, and the second scale in order to distinguish hour scale can bold lines hour scale

12 small moment of 1.2 -> 360 ° / 12 -> 30 ° a large grid

con.beginPath();//为了不影响其他绘图，加上起始路径
con.lineWidth = 4; //加粗小时刻度
for(var i = 0;i<12;i++){
    con.moveTo(x,y);
    con.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180);
}
con.closePath(); //为了不影响其他绘图，加上起始路径
con.stroke();

最后，再叠加一个较小的白色实心圆心，表盘就画完了（最难的部分也搞定了）

con.fillStyle = '#fff';
con.beginPath();
con.moveTo(x, y);
con.arc(x, y, 0.85 * r, 0, 2 * Math.PI);
con.closePath();
con.fill();

 总得来说，画表盘就和化妆一样，需要层层叠加

2.时、分、秒针

//注意：考虑到针要以圆心为中心旋转
con.lineWidth = 5; //定义时针线条的宽度
con.beginPath();
con.moveTo(x,y); //还是以圆心为起点
con.arc(x,y,0.5*r,0,0);//此处半径即时针的长度
con.closePath();
con.stroke();

分针和秒针就不做赘述，修改lineWidth的值和圆弧的半径即可

 

3.让时钟走起来

如何让秒针隔一秒动一下呢？是不是很快想到这个方法--->setInterval()

……
//获取当前系统时间
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
//时针对应的弧度
var hhVal = (-90 + hh * 30 + mm / 2)*Math.PI/180;
//-90:canvas画圆的起始点在表盘的3个字,而时钟的起始点应在12个字。+mm/2:时针不会一直只在整点的位置，分针走30分钟，时针多走15°
var mmVal = (-90 + mm * 6) * Math.PI / 180;
var ssVal = (-90 + ss * 6) * Math.PI / 180;
……
con.arc(x, y, 0.5 * r, hhVal, hhVal);
……
//调用函数
setInterval(toDraw, 1000);

组合好代码后，时钟就能走起来了：(＾－＾)V

奉上完整代码：

HTML部分

<canvas id="myClock" width="500" height="500"></canvas>
<p id="showDate"></p>

JavaScript部分

        window.onload = function () {
            //获取上下文对象
            var canvas = document.getElementById('myClock');
            var con = canvas.getContext('2d');
            //自定义函数---画表盘，针
            function toDraw() {
                //定义原点和半径
                var x = 250;
                var y = 250;
                var r = 150;
                //绘制秒刻度开始
                con.beginPath();
                for (var i = 0; i < 60; i++) {
                    con.moveTo(x, y);//以圆心为起点
                    con.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180);//绘制一段6°的圆弧
                }
                con.closePath(); //为了不影响其他绘图，加上起始路径
                con.stroke();
                //较小的白色圆盘
                con.fillStyle = '#fff';
                con.beginPath();
                con.moveTo(x, y);
                con.arc(x, y, 0.95 * r, 0, 2 * Math.PI);
                con.closePath();
                con.fill(); //实心圆
                //绘制秒刻度结束
                //同理绘制小时刻度
                con.beginPath();
                con.lineWidth = 4; //加粗小时刻度
                for (var i = 0; i < 12; i++) {
                    con.moveTo(x, y);
                    con.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180);
                }
                con.closePath(); //为了不影响其他绘图，加上起始路径
                con.stroke();
                //较小的白色圆盘
                con.fillStyle = '#fff';
                con.beginPath();
                con.moveTo(x, y);
                con.arc(x, y, 0.85 * r, 0, 2 * Math.PI);
                con.closePath();
                con.fill();
                //绘制小时刻度结束

                //获取当前系统时间
                var today = new Date();
                var hh = today.getHours();
                var mm = today.getMinutes();
                var ss = today.getSeconds();
                document.getElementById('showDate').innerHTML = hh+':'+mm+':'+ss;
                //时针对应的弧度
                var hhVal = (-90 + hh * 30 + mm / 2) * Math.PI / 180;
                var mmVal = (-90 + mm * 6) * Math.PI / 180;
                var ssVal = (-90 + ss * 6) * Math.PI / 180;
                //开始绘制时、分、秒针(注意：考虑到针要以原点为中心旋转)
                con.lineWidth = 5; //时针
                con.beginPath();
                con.moveTo(x, y);
                con.arc(x, y, 0.5 * r, hhVal, hhVal);
                con.closePath();
                con.stroke();
                con.lineWidth = 3; //分针
                con.beginPath();
                con.moveTo(x, y);
                con.arc(x, y, 0.65 * r, mmVal, mmVal);
                con.closePath();
                con.stroke();
                con.lineWidth = 1; //秒针
                con.beginPath();
                con.moveTo(x, y);
                con.arc(x, y, 0.8 * r, ssVal, ssVal);
                con.closePath();
                con.stroke();
            }
            //每隔1秒调用一次函数
            setInterval(toDraw, 1000);
        }