当前位置： 移动技术网 > IT编程>开发语言>JavaScript > canvas ：原生javascript编写动态时钟

canvas ：原生javascript编写动态时钟

2018年12月18日  | 移动技术网IT编程  | 我要评论

爱转角,火影控魂师,股市开盘时间和收盘时间

此时针是以画布的中心为圆心；

g.translate(width/2,width/2);

此函数是将画布的原点移到(width/2,width/2)

 

绘制表盘

function jiang(){
                r = width/2
                g.clearrect(0, 0, 600, 600);
                
                g.save();
                g.translate(r, r);
                g.rotate(-math.pi / 2);

              //分钟刻度线

                for(var i = 0; i < 60; i++) {//画60个刻度线
                    g.beginpath();
                    g.strokestyle ="white";
                    g.linewidth = 4;
                    g.moveto(250, 0);
                    g.lineto(240, 0);
                    g.stroke();
                    g.rotate(math.pi / 30); //每个6deg画一个时钟刻度线
                    g.closepath();
                }

              //时钟刻度线
                for(var i = 0; i < 12; i++) {//画12个刻度线
                    g.beginpath();
                    g.strokestyle ="white";
                    g.linewidth = 8;
                    g.moveto(250, 0);
                    g.lineto(230, 0);
                    g.stroke();
                    g.rotate(math.pi / 6); //每个30deg画一个时钟刻度
                    g.closepath();
                }
            }

 

时针

save和restore必不可少，在这两个函数之间，改变位置不会影响到其他函数，在此段代码中特指rotate，如果没有rotate，可以不用save和restore

一定要加beginpath，免得被其他函数影响

时针和分针秒针不一样，一个30°，还有分针的移动会影响时针的位置

时针运动的原理是画好一条线，然后旋转那条线

            function drawhour(hour,minu){
                g.save();
                g.beginpath();
                g.linewidth = 9;
                var rad = math.pi*2/12*hour;
                var radminu = math.pi*2/12/60*minu;
                g.rotate(rad + radminu)
                g.moveto(-10,0);
                g.lineto(r/2,0);
                g.strokestyle = "white";
                g.stroke();
                g.restore();
            }

分针

            function drawminu(minu){
                g.save();
                g.beginpath();
                g.linewidth = 6;
                var radminu = math.pi*2/60*minu;
                g.rotate(radminu)
                g.moveto(-16,0);
                g.lineto(r-100,0);
                g.strokestyle = "white";
                g.stroke();
                g.restore();
            }

秒针

　　　　　　　function drawseco(seco){
                g.save();
                g.beginpath();
                g.linewidth = 3;
                var radseco = math.pi*2/60*seco;
                g.rotate(radseco)
                g.moveto(-25,0);
                g.lineto(r-80,0);
                g.strokestyle = "#ff0032";
                g.stroke();
                g.restore();
            }

数字表

        function drawnumclock(){
            var data = new date();

            var sec = data.getseconds();
            var min = data.getminutes();
            var hour = data.gethours();

            g.fillstyle = "white";
            g.font = "20px '楷体'";
            g.beginpath();
            g.rotate(math.pi/2)        
            g.filltext(hour,60,0);
            g.filltext(":",80,0);
            g.filltext(min,90,0);
            g.font = "20px '楷体'";
            g.filltext(sec,120,0);

        }

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网