Canvas MIUI时钟

git地址(码云)：https://gitee.com/null_236_9657/MiClock/tree/master

html文件，canvas的color和background-color就是时钟的前景色和背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            background-color: #5881E9;
            color: #fff;
            width: 500px;
            height: 500px;

        }
    </style>
</head>
<body>
<canvas class="MiClock"></canvas>
<span id="span"></span>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>

js文件

/**
 * Created by Goodluck on 2017/7/21.
 */
(function () {
    var a, context, panelR, qstart, qend, secondLength, minuteLength, hourLength, color, baseAngle;
    setInfo("MiClock");
    setInterval(setTime, 20);

    function setInfo(name) {
        var MiClock = $("." + name);
        var canvas = MiClock[0];
        a = parseInt(MiClock.css("height"))
        canvas.width = 2 * a;
        canvas.height = 2 * a;
        context = canvas.getContext("2d");
        context.translate(a, a);
        panelR = 0.5 * a;
        qstart = 0.61 * a;
        qend = 0.685 * a;
        secondLength = 0.58 * a;
        minuteLength = 0.464 * a;
        hourLength = 0.374 * a;
        color = MiClock.css("color");
        baseAngle = (2 * Math.PI) / 200;

    }

    function setTime() {
        var date = new Date();
        var Hour = date.getHours(), Min = date.getMinutes(), Sec = date.getSeconds(), mSec = date.getMilliseconds();
        $("#span").text(Hour + ":" + Min + ":" + Sec + ":" + mSec);
        drawCanvas(Hour, Min, Sec, mSec);
    }

    function drawCanvas(Hour, Min, Sec, mSec) {
        context.clearRect(-a, -a, 2 * a, 2 * a);
        drawPanel();
        SetAlphaCircle(Sec, mSec);
        SetMinHourPanel(-(Hour / 6 - 0.5) * Math.PI - (Min * Math.PI / 1800) - (Sec * Math.PI / 21600), hourLength);
        SetMinHourPanel(-(Min / 30 - 0.5) * Math.PI - (Sec * Math.PI / 1800), minuteLength);
        //SetMinHourPanel(-(Sec / 30 - 0.5) * Math.PI - (mSec * Math.PI / 30000), secondLength);
        SetSecondPanel(-(Sec / 30 - 0.5) * Math.PI - (mSec * Math.PI / 30000), secondLength);
    }

    var getAlpha = function (i, start) {
        start = i - start;
        if (start < 0) start += 200;
        return start > 100 ? (0.006 * (start) - 0.2) : 0.4;
    };

    function SetAlphaCircle(Sec, mSec) {
        for (var i = 1; i <= 200; i++) {
            angle = baseAngle * i;
            var CurrentStart = Sec / 60 * 200 + mSec / 300 - 50;
            if (CurrentStart < 0) CurrentStart += 200;
            context.beginPath();
            context.globalAlpha = getAlpha(i, CurrentStart);
            context.strokeStyle = color;
            context.lineWidth = 4;
            context.moveTo(qstart * Math.cos(angle), qstart * Math.sin(angle));
            context.lineTo(qend * Math.cos(angle), qend * Math.sin(angle));
            context.stroke();
            context.closePath();
        }
        context.restore();
    }

    function SetMinHourPanel(angle, Length) {
        context.lineWidth = 8;
        context.beginPath();
        context.lineCap = "round";
        context.strokeStyle = color;
        context.moveTo(15 * Math.cos(angle), -15 * Math.sin(angle));
        context.lineTo(Length * Math.cos(angle), -Length * Math.sin(angle));
        context.stroke();
    }

    function SetSecondPanel(angle, Length) {
        var offsetAngel = 0.063;
        var cache = Length * 0.893;
        context.lineWidth = 8;
        context.fillStyle = color;
        context.beginPath();
        context.moveTo(cache * Math.cos(angle - offsetAngel), -cache * Math.sin(angle - offsetAngel));
        context.lineTo(Length * Math.cos(angle), -Length * Math.sin(angle));
        context.lineTo(cache * Math.cos(angle + offsetAngel), -cache * Math.sin(angle + offsetAngel));
        context.closePath();
        context.fill();
    }

    function drawPanel() {
        context.save();
        context.beginPath();
        context.lineWidth = 3;
        context.strokeStyle = color;
        context.arc(0, 0, panelR, 0, 2 * Math.PI);
        context.stroke();
        context.beginPath();
        context.lineWidth = 10;
        context.strokeStyle = color;
        context.arc(0, 0, 15, 0, 2 * Math.PI);
        context.stroke();
    }

})();

前端路上不断前进的小白的第一个小作品，喜欢的可以留个言，点个赞啥的，鼓励一下我

posted @ 2017-11-03 23:57  前端路上不断前进的小白  阅读(296)  评论(0)    收藏  举报