用canvas制作一个实时钟表，指针随时间改变而转动

window.onload=function(){


            var canvas=document.getElementById("clock");
            var context=canvas.getContext("2d");
            const R=canvas.width/2.1
            const circlePointX=canvas.width/2;
            const circlePointY=canvas.height/2;
            animate(canvas,context,R,circlePointX,circlePointY);

        }

        window.requestAnimationFrame=(function(callback){
            return window.requestAnimationFrame||
            window.webkitRequestAnimationFrame||
            window.mozRequestAnimationFrame||
            window.oRequestAnimationFrame||
            window.msRequestAnimationFrame||
            function(callback){
                window.setTimeout(callback,1000/60);
            };
        })();//重写函数从而兼容更多的浏览器


        function animate(canvas,context,R,circlePointX,circlePointY){
            var time=new Date();
            var hour=time.getHours()%12;
            var minute=time.getMinutes();
            var second=time.getSeconds();//获取当前系统时间
            var a1=hour*Math.PI/6;
            var a2=minute*Math.PI/30;
            var a3=second*Math.PI/30;//将时间换算为对应的角度
            context.clearRect(0,0,canvas.width,canvas.height);//清除上一帧的画面
            //画刻度
            dropMark(canvas,context,R,circlePointX,circlePointY);

            //画圆圈
            dropCircle(context,R,circlePointX,circlePointY);

            //画圆心
            dropCircleDot(canvas,context,R,circlePointX,circlePointY);

            //画指针
            dropPoint(canvas,context,R,circlePointX,circlePointY,R/6,R/4*2,Math.PI/10,a1);
            dropPoint(canvas,context,R,circlePointX,circlePointY,R/8,R/5*3,Math.PI/12,a2);
            dropPoint(canvas,context,R,circlePointX,circlePointY,R/8,R/8*7,Math.PI/24,a3);

            //画数字
            dropFont(canvas,context,R,circlePointX,circlePointY);



            requestAnimationFrame(function(){
                animate(canvas,context,R,circlePointX,circlePointY);//生成下一帧的图画
            })

        }

        function dropPoint(canvas,context,R,circlePointX,circlePointY,l,L,e,a){
            context.lineWidth=1;
            a=a-Math.PI/2
            context.moveTo(circlePointX,circlePointY);
            context.lineTo(l*Math.cos(a+e)+circlePointX,l*Math.sin(a+e)+circlePointY);//a是总共的旋转角度,e是指针开口的二分之一大小，l和L代表间接代表了构成指针上下两部分的长度比例，可以自行修改
             context.lineTo(L*Math.cos(a)+circlePointX,L*Math.sin(a)+circlePointY);
             context.lineTo(l*Math.cos(a-e)+circlePointX,l*Math.sin(a-e)+circlePointY);
             context.lineTo(circlePointX,circlePointY);
            context.lineJoin="miter";
            context.fill();
            context.stroke();
        }//绘制指针的函数

        function dropFont(canvas,context,R,circlePointX,circlePointY){
            context.font="20pt Calibri";
            context.fillStyle="black";
            for(var i=1;i<=12;i++){
                context.fillText(""+i,(R-40)*Math.cos(-Math.PI/3+(i-1)*Math.PI/6)+circlePointX,(R-40)*Math.sin(-Math.PI/3+(i-1)*Math.PI/6)+circlePointY);
            }
        }//绘制钟表上的字体

        function dropMark(canvas,context,R,circlePointX,circlePointY){
            var d=Math.PI/30;
            context.beginPath();
            for(var i=0;i<60;i++){
                context.lineWidth=5;
                if(i%15==0){
                    context.lineWidth=10;
                    context.strokeStyle="rgb(160, 46, 96)";
                    context.moveTo(Math.cos(Math.PI/2-i*d)*R+circlePointX,Math.sin(Math.PI/2-i*d)*R+circlePointY);
                    context.lineTo(Math.cos(Math.PI/2-i*d)*(R-30)+circlePointX,Math.sin(Math.PI/2-i*d)*(R-30)+circlePointY);
                    context.stroke();
                }
                else if(i%5==0){
                    context.lineWidth=8;
                    context.moveTo(Math.cos(Math.PI/2-i*d)*R+circlePointX,Math.sin(Math.PI/2-i*d)*R+circlePointY);
                    context.lineTo(Math.cos(Math.PI/2-i*d)*(R-22)+circlePointX,Math.sin(Math.PI/2-i*d)*(R-22)+circlePointY);
                    context.stroke();
                }
                else{
                    context.moveTo(Math.cos(Math.PI/2-i*d)*R+circlePointX,Math.sin(Math.PI/2-i*d)*R+circlePointY);
                    context.lineTo(Math.cos(Math.PI/2-i*d)*(R-15)+circlePointX,Math.sin(Math.PI/2-i*d)*(R-15)+circlePointY);
                    context.stroke();
                }
            }
        }//绘制钟表上的小刻度

        function dropCircle(context,R,circlePointX,circlePointY){
            context.beginPath();
            context.arc(circlePointX,circlePointY,R,0,2*Math.PI,false);
            context.lineWidth=8;
            context.strokeStyle="rgb(54, 2, 37)";
            context.stroke();
            context.fillStyle="rgba(201, 128, 159, 0.337)";
            context.fill();
        }//绘制圆形

        function dropCircleDot(canvas,context,R,circlePointX,circlePointY){
            context.beginPath();
            context.lineWidth=3;
            context.arc(circlePointX,circlePointY,5,0,2*Math.PI,false);
            context.stroke();
        }//绘制圆心

指针的绘制利用圆的参数方程的思想，从而将直线绘制为指针，且支持旋转。下图为演示图