将 Canvas 时钟设置为系统时间

Question

我在 canvas 中做了一个时钟，它每秒滴答作响。我想将时间设置为系统时钟。我有时间使用函数 "var date = new Date();"。但是想不通如何根据时间得到角度。

非常感谢帮助。

JSFiddle : http://jsfiddle.net/RaoBurugula/6aLauwaj/2/

        var c = document.getElementById("myCanvas");
        var ctxline = c.getContext("2d");
        //variables
        var seconds = 0,minutes = 0 , hours = 0;
        var iSeconds = 0, counterSeconds = 0, xSeconds=180,ySeconds=0;
        var increaseSeconds = 6 * Math.PI /180;
        var iMinutes = 0, counterMinutes = 0, xMinutes=180,yMinutes=0;
        var increaseMinutes = 6 * Math.PI /180;
        var iHours = 0, counterHours = 0, xHours=180,yHours=0;
        var increaseHours = 6 * Math.PI /180;
        //ctxline.clearRect(0, 0, c.width, c.height);

        //drawLinesInCircle();
        clockDesign();
        getAndSetCurrentTime();
        clock();
        function clockDesign(){
            var iClockHours = 0, counterClockHours = 0, xClockHours=180,yClockHours=0;
            var increaseClockHours = 30 * Math.PI /180;
            var hours = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
            var gradient=ctxline.createLinearGradient(0,0,c.width,0);
            jQuery.each( hours, function( i, val ) {                 
                xClockHours = 180 + Math.sin(counterClockHours)* 140;
                yClockHours =  180 - Math.cos(counterClockHours)* 140;
                counterClockHours += increaseClockHours; 
                //alert(counterClockHours);
                // Create gradient
                ctxline.font="30px Verdana";
                ctxline.textAlign = 'center';
                gradient.addColorStop("0.5","red");


                ctxline.fillStyle=gradient;
                ctxline.fillText(val,xClockHours,yClockHours);

            });
        }

        function getAndSetCurrentTime(){
            var dt = new Date();
            var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
            //alert(time);
        }

        function clock(){
            //Seconds
            seconds += 1;
            xSeconds = 180 + Math.sin(counterSeconds)* 120;
            ySeconds =  180 - Math.cos(counterSeconds)* 120;    
            counterSeconds += increaseSeconds;
            iSeconds += 6;

            //minutes
            xMinutes = 180 + Math.sin(counterMinutes)* 110;
            yMinutes =  180 - Math.cos(counterMinutes)* 110;
            //hours
            xHours = 180 + Math.sin(counterHours)* 100;
            yHours =  180 - Math.cos(counterHours)* 100;

            if(seconds == 60){  
                //alert("one min");
                minutes +=1;
                seconds =0;
                counterMinutes += increaseMinutes; 
                iMinutes += 6;
            }

            if(minutes == 60){
                hours +=1;
                minutes = 0;
                seconds = 0;
                counterHours += increaseHours; 
                iHours += 6;
            }

            if(hours == 12){
                hours = 0;
                minutes = 0;
                seconds = 0; 
            }

            draw(xSeconds,ySeconds, xMinutes, yMinutes, xHours, yHours);
            setTimeout(clock, 1000); 
        }

        function draw(xSecondsTo,ySecondsTo, xMinutesTo, yMinutesTo, xHoursTo, yHoursTo){
            ctxline.clearRect(0, 0, c.width, c.height);
            clockDesign();
            ctxline.beginPath();
            //seconds line
            ctxline.strokeStyle = ("#EDDE54");
            ctxline.lineWidth = 1;
            ctxline.moveTo(180,180);     
            ctxline.lineTo(xSecondsTo,ySecondsTo);
            ctxline.stroke();
            ctxline.closePath();

            //miuntes line  
            ctxline.beginPath();
            ctxline.strokeStyle = ("#545EED");
            ctxline.lineWidth = 4;
            ctxline.moveTo(180,180);     
            ctxline.lineTo(xMinutesTo,yMinutesTo);
            ctxline.stroke();
            ctxline.closePath();
            //Hours line 
            ctxline.beginPath();
            ctxline.strokeStyle = ("#BE1616");
            ctxline.lineWidth = 7;
            ctxline.moveTo(180,180);     
            ctxline.lineTo(xHoursTo,yHoursTo);
            ctxline.stroke();
            ctxline.closePath();
        }

Answer 1

您已经拥有所需的所有代码：每一秒您都在做 counterSeconds += increaseSeconds;

只需使用相同的过程用当前日期初始化您的计数器即可：

function getAndSetCurrentTime(){
  var dt = new Date();
  var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
  //alert(time);
  counterSeconds = dt.getSeconds() * increaseSeconds;
  counterMinutes = dt.getMinutes() * increaseMinutes;
  counterHours = dt.getHours() * increaseHours;
}

编辑 fiddle : http://jsfiddle.net/6aLauwaj/16/

Answer 2

见http://jsfiddle.net/6aLauwaj/9/

就像Luckyn建议的那样，但需要调整时间。

var secs = dt.getSeconds();
seconds=secs;
counterSeconds = secs * (increaseSeconds);

var mins = dt.getMinutes();
minutes = mins;
counterMinutes = mins * increaseMinutes;
//alert(time);
var Hours = dt.getHours() % 12;
Hours *= 5;
hours = Hours;
counterHours = (Hours * increaseHours) + (30 * counterMinutes / 360); //Need to consider the minutes, take minutes angle and calculate how much further hour should be angled.

将 Canvas 时钟设置为系统时间

Setting the Canvas clock to system time

html

javascript

time

canvas

clock