一个简易的时钟效果

2018-06-24 00:27:45来源：未知阅读 ()

时钟特效

js代码

var canvas = document.getElementById("clock");
var clock = canvas.getContext("2d");
    
function zhong() {
    clock.save();
    //开始画外层圆
    clock.translate(200, 200);
    clock.strokeStyle = 'black';
    clock.lineWidth = 3;
    clock.beginPath();
    clock.arc(0, 0, 195, 0, 2 * Math.PI);
    clock.stroke();

    //时钟上的数字
    var shuzi = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
    clock.font = "30px Arial";
    clock.textAlign = "center";
    clock.textBaseline = "middle";
    shuzi.forEach(function(number, i) {
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * 180;
        var y = Math.sin(rad) * 180;
        clock.fillText(number, x, y);
    });

    //    小圆点

    for(j = 0; j < 60; j++) {
        var h = 2 * Math.PI / 60 * j;
        var m = Math.cos(h) * 180;
        var n = Math.sin(h) * 180;
        clock.fillStyle = 'black';
        clock.beginPath();
        if(j % 5 === 0) {
            continue;
        }
        clock.arc(m, n, 3, 0, 2 * Math.PI);
        clock.fill();
    }
}
function drawHour(hour,min) {
    clock.save();
    var rad = 2 * Math.PI / 12 * hour;
    var red = 2 *Math.PI/12/60*min;
    clock.rotate(rad+red);
    clock.lineWidth = 10;
    clock.lineCap = "round";
    clock.beginPath();
    clock.moveTo(0, 5);
    clock.lineTo(0, -100);
    clock.stroke();
    clock.restore();
}

function drawmin(min) {
    clock.save();
    var rad = 2 * Math.PI / 60 * min;
    clock.rotate(rad);
    clock.lineWidth = 5;
    clock.lineCap = "round";
    clock.beginPath();
    clock.moveTo(0, 10);
    clock.lineTo(0, -150);
    clock.stroke();
    clock.restore();
}

function drawsec(sec) {
    clock.save();
    var rad = 2 * Math.PI / 60 * sec;
    clock.rotate(rad);
    clock.lineWidth = 2;
    clock.lineCap = "round";
    clock.strokeStyle = "red";
    clock.beginPath();
    clock.moveTo(0, 10);
    clock.lineTo(0, -180);
    clock.stroke();
    clock.restore();
}

function dian() {
    clock.fillStyle = "white";
    clock.beginPath();
    clock.arc(0, 0, 2, 0, 2 * Math.PI);
    clock.fill();
}

function xuanzhuan() {
    clock.clearRect(0,0,400,400);
    zhong();
    var now = new Date();
    var hour = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();
    drawHour(hour,min);
    drawmin(min);
    drawsec(sec);
    dian();
    clock.restore();
}
xuanzhuan();

setInterval(xuanzhuan, 1000);