欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

canvas :原生javascript编写动态时钟

程序员文章站 2022-04-13 15:25:39
canvas :原生javascript编写动态时钟 此时针是以画布的中心为圆心; g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,width/2) 绘制表盘 function jiang(){ r = width/2 g.clearRect(0 ......

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

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

        }