用canvas画时钟（一步步详解附带源代码）

canvas绘图

该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。

绘制路径

要绘制路径首先必须调用beginPath()方法，如果想绘制一条连接到起点的线条则调用closePath()方法；如果路径已完成，你想用fillStyle填充它，可以调用fill()方法。另外还可以调用stroke()方法对路径描边，使用strokeStyle。

接口	参数	功能
rect（）	x,y,width,height	从点x,y开始绘制一个矩形，宽和高分别由width和height指定，这个方法是绘制路径。而不是fillRect()和strokeRect()所绘制的独立形状
arc()	x,y,radius,startAngle,endAngle,counterclockwise 六个参数	以x,y为圆心绘制一条弧线，半径为radius，起始和结束角度分别为startAngle和endAngle，最后一个参数表示角度是否按逆时针方向计算，值为false表示顺时针。
lineTo()	x,y	从上一点开始绘制一条直线，到x,y为止
moveTo()	x,y	将绘图游标移动到x,y，不画线。

按照上图，就能画出圆，半圆，，四分之一圆等等。

开始画图

1.先设置一块画布。

<style>
        .cvs {
   
        	border：solid 1px blue;  //加一个边框更容易确定位置
            display: block;		//把canvas设置为块
            margin: auto;		//canvas居中显示
        }
    </style>
    <canvas class="cvs" width="500px" height="500px"></canvas>

2.画一个圆，并将圆心坐标重新设为（0，0）

var c = document.getElementsByClassName('cvs')[0]
        var cv = c.getContext('2d')
        cv.translate(250, 250)

        function yuan() {
   
            cv.lineWidth = 10;
            cv.beginPath()
            cv.arc(0, 0, 245, 0, 2 * Math.PI, false)
            cv.closePath()
            cv.stroke()
        }

3.在钟面上标上时间和刻度

function num() {
   
            var nums = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
            for (i = 0; i < nums.length; i++) {
   
                var rad = 2 * Math.PI / 12 * i;
                var x = Math.cos(rad) * 215;
                var y = Math.sin(rad) * 215;
                cv.font = "20px Georgia";
                cv.textBaseline = 'middle';
                cv.textAlign = "center";
                cv.fillText(nums[i], x, y);
            }
            for (i = 0; i < 60; i++) {
   
                var rad = 2 * Math.PI / 60 * i;
                var x = Math.cos(rad) * 230;
                var y = Math.sin(rad) * 230