Make a simple clock effect

Clock effects

js code

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 = &#39;black&#39;;
        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);

The above is the detailed content of Make a simple clock effect. For more information, please follow other related articles on the PHP Chinese website!