JS 画布时钟

【SCSCMS】
下载
新闻
文章
JS 画布时钟

<!DOCTYPE html>
<html lang=us>
<head>
    <meta charset="UTF-8">
    <title>JS 画布时钟</title>
</head>
<body>
<canvas width="300" height="300" id="clock"></canvas>
<div id="out" style="font-size: 22px; text-transform: full-width;"></div>
<script>
    var ctx,out = document.getElementById("out"),canvas = document.getElementById("clock");
    ctx = canvas.getContext("2d");//获取画布环境
    var radgrad = ctx.createRadialGradient(150,150, 300, 150,150, 110);//创建渐变
    radgrad.addColorStop(0, '#000');
    radgrad.addColorStop(1, '#FFF');
    var radgrad2 = ctx.createRadialGradient(150,150, 300, 150,150, 110);//创建渐变
    radgrad2.addColorStop(0, "#000");
    radgrad2.addColorStop(.83, "rgb(255,255,100)");
    function drawFrame(){
        var d  = new Date(),
            h  = d.getHours(),
            m  = d.getMinutes(),
            s  = d.getSeconds(),
            ms = d.getMilliseconds(),off,coor,coor2;
        out.innerHTML = ("0" + h).slice(-2) + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2) + ":" + ms;
        ctx.fillStyle = radgrad2;
        Circle(ctx,0,0,canvas.width/2);
        ctx.fillStyle = radgrad;
        Circle(ctx,10,10,canvas.width/2-10);
        ctx.fillStyle = "rgb(222,255,222)";
        ctx.strokeStyle = "rgb(0,125,0)";
        Circle(ctx,5,5,20);//小圆
        ctx.stroke();
        Circle(ctx,25,25,.1);//小圆心
        ctx.stroke();
        ctx.fillStyle = "#000";
        Circle(ctx,145,145,5);
        ctx.lineCap = "round";

        // 数字
        ctx.font = "22px Arial";
        off = ctx.measureText("12").width;
        ctx.fillText("12",150 - off / 2, 25);
        off = ctx.measureText("6").width;
        ctx.fillText("6",150 - off / 2, canvas.height - 13);
        off = ctx.measureText("3").width;
        ctx.fillText("3", canvas.width - off * 2,canvas.height / 2 + 22 / 4);
        off = ctx.measureText("9").width;
        ctx.fillText("9", off,canvas.height / 2 + 22 / 4);
        //刻度
        ctx.fillStyle = "rgb(0,0,0)";
        ctx.strokeStyle = "rgb(0,0,0)";
        ctx.lineWidth = 1;
        for(var i = 12;i --;){
            if(i!=0 && i!=3 && i!=6 && i!=9){
                coor = findPoint(150,150,125,( (i/6)*Math.PI) - 0.5*Math.PI);
                coor2 = findPoint(150,150,135,( (i/6)*Math.PI) - 0.5*Math.PI);
                ctx.beginPath();
                ctx.moveTo(coor.x,coor.y);
                ctx.lineTo(coor2.x,coor2.y);
                ctx.stroke();
            }
        }
        for(i = 120;i --;){
            coor = findPoint(150,150,135,( (i/60)*Math.PI) - 0.5*Math.PI);
            coor2 = findPoint(150,150,140,( (i/60)*Math.PI) - 0.5*Math.PI);
            ctx.beginPath();
            ctx.moveTo(coor.x,coor.y);
            ctx.lineTo(coor2.x,coor2.y);
            ctx.stroke();
        }
        // 毫秒
        ctx.fillStyle = "rgb(222,255,222)";
        ctx.strokeStyle = "rgb(0,125,0)";
        ctx.beginPath();
        ctx.moveTo(25,25);
        coor = findPoint(25,25,20,( (ms/30)*Math.PI) - .5*Math.PI);
        ctx.lineTo(coor.x,coor.y);
        ctx.stroke();

        // 秒钟
        ctx.strokeStyle = "rgb(255,0,0)";
        ctx.fillStyle = "rgb(255,0,0)";
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.moveTo(150,150);
        s += ms / 1000;
        coor = findPoint(150,150,136,( (s/30)*Math.PI) - 0.5*Math.PI);
        ctx.lineTo(coor.x,coor.y);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(coor.x,coor.y,3,0,Math.PI*2,true);
        ctx.fill();

        // 分钟
        ctx.strokeStyle = "rgb(255,125,0)";
        ctx.fillStyle = "rgb(255,125,0)";
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(150,150);
        m += s / 60;
        coor = findPoint(150,150,100,( (m/30)*Math.PI) - 0.5*Math.PI);
        ctx.lineTo(coor.x,coor.y);
        coor2 = findPoint(150,150,95,( ((m-.5)/30)*Math.PI) - 0.5*Math.PI);
        ctx.lineTo(coor2.x,coor2.y);
        ctx.moveTo(coor.x,coor.y);
        coor2 = findPoint(150,150,95,( ((m+.5)/30)*Math.PI) - 0.5*Math.PI);
        ctx.lineTo(coor2.x,coor2.y);
        ctx.stroke();

        // 小时
        ctx.strokeStyle = "rgb(0,0,0)";
        ctx.beginPath();
        ctx.lineWidth = 4;
        ctx.moveTo(150,150);
        h += m / 60;
        coor = findPoint(150,150,55,( (h/6)*Math.PI) - .5*Math.PI);
        ctx.lineTo(coor.x,coor.y);
        ctx.stroke();
        window.setTimeout(drawFrame,10);
    }
    function findPoint(cx,cy,r,a){
        var x = parseInt(cx + r * Math.cos(a)),y = parseInt(cy + r * Math.sin(a));
        return {x: x, y: y}
    }
    function Circle(ctx,x,y,r){
        ctx.beginPath();
        ctx.arc(x+r,y+r,r,0,Math.PI*2,true);
        ctx.fill();
    }
    drawFrame()
</script>
</body>
</html>