canvas时钟

已知半径c，和x的角度求点的坐标，求点的坐标相当于求b跟a的值，b=sinx.c a=cosx.c,所有圆上任意点的坐标为（sinx.c,cosx.c）

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
// 时钟圆心坐标
var x = canvas.width / 2;
var y = canvas.height / 2;
var r = 150;
        function zhong() {
            // 圆
            ctx.beginPath();
            ctx.lineWidth = 10;
            ctx.strokeStyle = '#000';
            ctx.arc(x, y, r, 0, 2 * Math.PI, 0);
            ctx.stroke();
            // 画点
            for (var i = 0; i < 60; i++) {
                var xxdian = Math.sin(i * 2 * Math.PI / 60) * (r - 12);
                var yydian = Math.cos(i * 2 * Math.PI / 60) * (r - 12);
                // console.log(xxdian, yydian);
                // 360/60 *
                if (i % 5 == 0) {
                    ctx.fillStyle = '#000';
                } else {
                    ctx.fillStyle = '#bbb';
                }
                ctx.beginPath();
                ctx.arc(xxdian + x, yydian + y, 2, 0, 2 * Math.PI, 0);
                ctx.fill();
            }

            // 数字
            for (var i = 0; i < 12; i++) {
                var str = String(i);
                if (i == 0) {
                    str = '12';
                }
                ctx.beginPath();
                ctx.font = '15px sans-serif';
                ctx.fillStyle = '#000';
                var xxshu = Math.sin(i * ((Math.PI * 2) / 12)) * (r - 25) - (15 / 2 / 2);
                var yyshu = Math.cos(i * ((Math.PI * 2) / 12)) * (r - 25) - (15 / 2 / 2);
                ctx.fillText(str, x + xxshu, y - yyshu);
            }

            // 圆心
            ctx.beginPath();
            ctx.fillStyle = '#000';
            ctx.arc(x, y, 2, 0, 2 * Math.PI, 0);
            ctx.fill();

        }

        function times() {
            // 时针
            var date = new Date();
            var sec = date.getSeconds(); // 秒
            var min = date.getMinutes(); //分
            var hou = date.getHours(); //时
            ctx.lineWidth = '2'
            ctx.strokeStyle = '#000';
            // 时针
            ctx.beginPath();
            ctx.moveTo(x, y);
            xxsec = Math.sin(sec * ((Math.PI * 2) / 60)) * 130;
            yysec = Math.cos(sec * ((Math.PI * 2) / 60)) * 130;
            ctx.lineTo(x + xxsec, y - yysec);
            ctx.stroke();
            // 分针
            ctx.beginPath();
            ctx.moveTo(x, y);
            xxmin = Math.sin(min * ((Math.PI * 2) / 60)) * 100;
            yymin = Math.cos(min * ((Math.PI * 2) / 60)) * 100;
            ctx.lineTo(x + xxmin, y - yymin);
            ctx.stroke();
            // 秒针
            ctx.beginPath();
            ctx.moveTo(x, y);
            xxhou = Math.sin(hou * ((Math.PI * 2) / 12)) * 90;
            yyhou = Math.cos(hou * ((Math.PI * 2) / 12)) * 90;
            ctx.lineTo(x + xxhou, y - yyhou);
            ctx.stroke();
        }

        setInterval(function() {
            ctx.clearRect(0, 0, 400, 400);
            zhong();
            times();
        }, 1000)
        

解析：创建绘图，然后创建ctx画笔，给画笔设置连线宽度和连线颜色，画出钟表的圆形，然后根据半径和角度算出不同时间角度所对应的坐标点，由于坐标点是相对于（0,0）点，而画布的原点在坐上角，所以点坐标x轴需要加上圆心的坐标点，y轴坐标需要圆心坐标点减去计算出的y的坐标，这样才能得到相对于时钟圆心点的坐标，然后绘制半径为2的原点，一共有60个原点需要绘制，使用循环，i控制变化的角度即可绘制所有点。
然后是绘制数字，数字与点的绘制类似，循环i控制数字所显示的字符串时，0需要改变成12，然后向内进行微调即可
绘制圆心，根据圆心坐标绘制半径为2的圆
然后是获取时间对象，得到时分秒，秒针和分针都需要把圆分割成60个块，所有根据当前的秒的数字和分的数值，即可算出相对应的角度，根据角度和半径即可算出在半径圆上所对应的位置，获取圆心的点，与算出的点进行连线即可产生分针和秒针的效果，时针只需要将圆分割成12份算出角度等一系列操作就可以得到点与圆心连线产生的时针效果。
最后将绘制时钟和绘制时分秒针放入定时器，每秒更新一次，清除画布一次就可以得到一个时钟了。