var dom = document.getElementById('clock');

var ctx = dom.getContext('2d');

console.log(ctx);

var width = ctx.canvas.width;

var height = ctx.canvas.height;

var r = width / 2;

var rem = width / 200;

function drawBackground() {

ctx.save();

//坐标定义在中间

ctx.translate(r,r);

//起始一条路径

ctx.beginPath();

//路径宽度

    ctx.lineWidth = 10 * rem;

// 创建弧或曲线()

ctx.arc(0,0,r - ctx.lineWidth / 2,0,2*Math.PI, false); 

    //绘制已定义的路径

    ctx.stroke();

     // 定义小时数

    var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

    ctx.font = 18 * rem +'px Arial';

    ctx.textAlign = 'center';

    ctx.textBaseline = 'middle';

    // 遍历小时数，获取坐标

    hourNumbers.forEach(function(number, i) {

    //获取弧度

    var rad = 2 *  Math.PI /  12 * i;

    // 坐标 

    var x = Math.cos(rad) * (r - 30 * rem);

    var y = Math.sin(rad) * (r - 30 * rem);

    // 文本填充

    ctx.fillText(number, x, y);

    });

    //遍历60个点

    for (var i = 0; i < 60; i++){

    var rad = 2 *  Math.PI /  60 * i;

    var x = Math.cos(rad) * (r - 18 * rem);

    var y = Math.sin(rad) * (r - 18 * rem);

    // 重置外圆的绘制

    ctx.beginPath();

        if(i % 5 === 0){

ctx.fillStyle = "#000";

        ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);

        }else{

        ctx.fillStyle = "#ccc";

        ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);

        }   

    // 填充圆点

    ctx.fill();

    }

}

function drawHour(hour,minute) {

ctx.save();

ctx.beginPath();

    ctx.lineWidth = 6 * rem;

    ctx.lineCap = 'round';

var rad = 2 * Math.PI / 12* hour;

var mrad = 2 * Math.PI / 12 / 60 * minute;

ctx.rotate(rad + mrad);

// 画线位置

ctx.moveTo(0 * rem ,10);

ctx.lineTo(0 * rem, -r/2);

ctx.stroke();

ctx.restore();

}

function drawMinute(minute) {

ctx.save();

ctx.beginPath();

var rad = 2 * Math.PI / 60* minute;

ctx.rotate(rad);

    ctx.lineWidth = 3 * rem;

    ctx.lineCap = 'round';

    ctx.moveTo(0 ,10 * rem);

ctx.lineTo(0, -r + 30 * rem);

ctx.stroke();

ctx.restore();

}

function drawSecond(second) {

ctx.save();

ctx.beginPath();

    ctx.fillStyle = "#f00";

    var rad = 2 * Math.PI / 1200 * second;

    ctx.rotate(rad);

    ctx.moveTo(-2 * rem ,20 * rem);

ctx.lineTo(2 * rem, 20 * rem);

ctx.lineTo(1 * rem, -r +18 * rem);

ctx.lineTo(-1 * rem, -r +18 * rem);

ctx.fill();

ctx.restore();

}

function drawDot(){

ctx.beginPath();

ctx.fillStyle = "#fff";

ctx.arc(0,0,3,0,2*Math.PI,false);

ctx.fill();

}

function draw(){

ctx.clearRect(0,0,width,height)

var now = new Date();

var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();

drawBackground();

drawHour(hour,minute);

drawMinute(minute);

drawSecond(second)

drawDot();

ctx.restore();

console.log(hour,minute,second);

}

setInterval(draw,50);