canvas时针

Html

Css

body{
            background-color:black;
        }
        #c1{
            background-color:white;
        }
        span{
            background-color:#white;
        }

$(function() {
    var c = document.getElementById("c1");
    var co = c.getContext('2d');
    //            var grd=ctx.createRadialGradient(200,200,150,200,200,200);
    //            grd.addColorStop(0,"red");
    //            grd.addColorStop(1,"white");
    function Dong() {
        var x = 200;
        var y = 200;
        var r = 150;
        //                co.clearRect(0,0, c.width, c.height)
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        var hvalue = (-90 + h * 30 + m / 2) * Math.PI / 180;
        var mvalue = (-90 + m * 6) * Math.PI / 180;
        var svalue = (-90 + s * 6) * Math.PI / 180;

co.save();
        co.beginPath();
        for (var i = 0; i < 60; i++) {
            co.lineWidth = 2;
            co.moveTo(x, y);
            co.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
            co.strokeStyle = 'white';
            var c = co.createRadialGradient(200, 200, 140, 200, 200, 60);
            c.addColorStop(0, "#0ef")
            c.addColorStop(1, "#22f")
            co.fillStyle = c;
            co.fill();
        }
        co.closePath();
        co.stroke();
        co.restore();

co.save();
        co.beginPath();
        co.moveTo(x, y);
        co.arc(x, y, r * 19 / 20, 0, 360 * Math.PI / 180, false)
        var c = co.createRadialGradient(200, 200, 140, 200, 200, 60);
        c.addColorStop(0, "#0ef")
        c.addColorStop(1, "#22f")
        co.fillStyle = c;
        co.fill();
        co.closePath();
        co.restore();

co.save();
        co.beginPath();
        for (var i = 0; i < 12; i++) {
            co.lineWidth = 3;
            co.strokeStyle = 'white';
            co.moveTo(x, y);
            co.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);
        }
        co.closePath();
        co.stroke();
        co.restore()

co.save();
        co.beginPath();
        co.moveTo(x, y);
        co.arc(x, y, r * 18 / 20, 0, 360 * Math.PI / 180, false);
        var c = co.createRadialGradient(200, 200, 140, 200, 200, 0);
        c.addColorStop(0, "#0ef")
        c.addColorStop(1, "#22f")
        co.fillStyle = c;
        co.fill();
        co.closePath();
        co.restore();

co.save();
        co.strokeStyle = "white";
        co.font = '40px sans-serif';
        co.textAlign = 'center';
        co.textBaseline = 'middle';
        co.strokeText('smart', 200, 250);
        co.restore();

co.save();
        co.lineWidth = 5;
        co.beginPath();
        co.strokeStyle = 'white';
        co.moveTo(x, y);
        co.arc(x, y, r * 10 / 20, hvalue, hvalue, false)
        co.closePath();
        co.stroke();
        co.restore();

co.save();
        co.lineWidth = 3;
        co.beginPath();
        co.strokeStyle = 'white';
        co.moveTo(x, y);
        co.arc(x, y, r * 14 / 20, mvalue, mvalue, false)
        co.closePath();
        co.stroke();
        co.restore();

co.save();
        co.lineWidth = 1;
        co.beginPath();
        co.strokeStyle = 'white';
        co.moveTo(x, y);
        co.arc(x, y, r * 18 / 20, svalue, svalue, false);
        co.closePath();
        co.stroke();
        co.restore();

co.save();
        co.beginPath();
        //                co.strokeStyle = 'white';
        co.fillStyle = 'white';
        co.font = "20px hh"
        co.fillText("3", 320, 210);
        co.fillText("6", 195, 330);
        co.fillText("9", 70, 210);
        co.fillText("12", 185, 85);
        co.fillText("1", 260, 100);
        co.fillText("2", 300, 150);
        co.fillText("4", 300, 270);
        co.fillText("5", 260, 310);
        co.fillText("7", 130, 310);
        co.fillText("8", 85, 270);
        co.fillText("10", 85, 150);
        co.fillText("11", 130, 100);
        co.closePath();
        co.stroke();
        co.restore();

}
    Dong();
    setInterval(Dong, 1000);
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.7.2

立即下载

canvas时针



代码描述：canvas绘制时钟

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

藏心

相关代码

canvas时针

最新