源碼及 demo

https://github.com/iljyya/canvas-clock-pink

核心代碼

'use strict';

const CANVAS_WIDTH = 500;
const CANVAS_HEIGHT = 500;

const BACKGROUND_WIDTH = CANVAS_WIDTH /20; //邊框線條寬度

const RADIUS_X = CANVAS_WIDTH / 2 ; //x中心---即 x 半徑
const RADIUS_Y = CANVAS_WIDTH / 2 ; // y中心 --- 即 Y半徑

var hourNumber = [3,4,5,6,7,8,9,10,11,12,1,2];//小時數(shù)---數(shù)組

var hourNumberLength = hourNumber.length;

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

// console.log(clock_canvas);

clockCanvas.width = CANVAS_WIDTH;
clockCanvas.height = CANVAS_HEIGHT;

var ctx =  clockCanvas.getContext('2d');
ctx.translate(RADIUS_X , RADIUS_Y);//重新映射畫布上的 (0,0) 位置


draw();//畫

//總函數(shù)
function draw() {

    ctx.clearRect(-RADIUS_X ,-RADIUS_Y,CANVAS_WIDTH,CANVAS_HEIGHT   );
    var now = new Date();
    var hour = now.getHours();//小時數(shù)
    var minutes = now.getMinutes();//分鐘數(shù)
    var seconds = now.getSeconds();//秒數(shù)

    drawBackground(ctx); //畫表盤背景
    drawDot();//畫時刻點
    drawHour(hour,minutes,seconds);//畫時針
    drawMinute(minutes,seconds);//畫分針
    drawSecond(seconds);//畫秒針
}

//每秒刷新 
setInterval(draw, 1000);

//畫表盤背景
function drawBackground(ctx) {

    // ctx.clearArc()
    ctx.beginPath();
    ctx.strokeStyle = "pink";
    ctx.lineWidth = BACKGROUND_WIDTH; //線條寬度
    // context.arc(x,y,r,sAngle,eAngle,counterclockwise);
    ctx.arc( 0, 0, RADIUS_X-BACKGROUND_WIDTH / 2, 0, 2*Math.PI, false);
    ctx.stroke();
    ctx.closePath();



    ctx.font = CANVAS_WIDTH * 0.1+ 'px Arial';

    ctx.textAlign = 'center';//文本的中心被放置在指定的位置
    ctx.textBaseline = 'middle';

    hourNumber.forEach(function (number,index) { //遍歷小時數(shù)，并寫上數(shù)字

        var rad = 2 * Math.PI / hourNumberLength * index ; //每個小時對應(yīng)的弧度
        ctx.beginPath();
        ctx.fillStyle = '#FF34B3';
        var x = RADIUS_X * 0.7 * Math.cos(rad);
        var y = RADIUS_X * 0.7 * Math.sin(rad);
        // console.log('x,y',x,y);
        console.log('num',number);
        ctx.fillText(number,x,y);
        ctx.closePath();
    });

    for (var i = 0; i < 60; i++) { //遍歷分鐘绽诚，并打上點

       var rad = 2 * Math.PI / 60 * i;
       var x = RADIUS_X * 0.85 * Math.cos(rad);
       var y = RADIUS_X * 0.85 * Math.sin(rad);
       ctx.beginPath();
       if(i % 5 == 0){  // 小時刻度的點
            ctx.fillStyle = '#FF00FF';
            ctx.arc(x,y,2,0,2*Math.PI,false);
       }else{   // 其他分鐘刻度的點
            ctx.fillStyle = '#ccc';
            ctx.arc(x,y,2,0,2*Math.PI,false);
       }
       ctx.fill();
       ctx.closePath();
    }

}

//畫出時針
function drawHour(hour,minute,second) {
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = RADIUS_X * 0.04;
    ctx.lineCap = 'round';
    ctx.rotate(2*Math.PI / (12*3600) * (hour*3600+minute*60+second));
    ctx.moveTo(0,10);
    ctx.lineTo(0,- RADIUS_X * 0.7 /2);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}
//畫出分針
function drawMinute(minute,second) {
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = RADIUS_X * 0.02;
    ctx.lineCap = 'round';
    ctx.rotate(2*Math.PI / 3600 * (minute*60+second));
    ctx.moveTo(0,10);
    ctx.lineTo(0,- RADIUS_X * 0.9 /2);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

//畫出秒針
function drawSecond(second) {
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = RADIUS_X * 0.01;
    ctx.lineCap = "round";
    ctx.fillStyle = 'red';
    ctx.rotate(2 * Math.PI / 60 * second)
    // ctx.moveTo(-RADIUS_X * 0.02,-RADIUS_X * 0.2);
    ctx.moveTo(RADIUS_X * 0.02,-RADIUS_X * 0.2);
    // ctx.lineTo(-RADIUS_X * 0.01,RADIUS_X * 0.7 );
    ctx.lineTo(RADIUS_X * 0.01,RADIUS_X * 0.7 );
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

//畫時鐘的中心點
function drawDot() {
    ctx.beginPath();
    ctx.fillStyle = '#fff';
    ctx.arc(0, 0,RADIUS_X * 0.04, 0, 2*Math.PI, false);
    ctx.fill();
    ctx.closePath();
}

參考

http://www.imooc.com/view/612