HTML5/Canvas可以切换日夜模式的挂钟动画

Canvas Wall Clock with Night Mode

html5, canvas, clock

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2288
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

function Surface() {
    var now = new Date();
    this.accent = window.getComputedStyle(document.body.querySelector(".day")).color;
    this.nightAccent = window.getComputedStyle(document.body.querySelector(".night")).color;
    this.nightStart = 18;
    this.fontWeight = 300;
    this.fontFamily = window.getComputedStyle(
        document.querySelector(".container")
    ).fontFamily.split(/\,\s/)[0].replace(/[\"|\']/g, "");
    this.nightEnd = 8;
    this.element = document.createElement("canvas");
    this.context = this.element.getContext("2d");
    this.rotationOffset = 0 - (Math.PI / 2);
    this.gauges = false;

this.attach = function() {
        document.body.querySelector(".container").appendChild(this.element);
        window.addEventListener("resize", this.resize.bind(this));
        var s = this;
        document.getElementById("night").addEventListener("change", function() {
            s.nightMode = this.checked;
            if (s.nightMode) {
                document.documentElement.classList.add("night");
            } else {
                document.documentElement.classList.remove("night");
            }
            document.body.scrollTop = window.innerHeight;
        });
        document.getElementById("gauges").addEventListener("change", function() {
            s.gauges = this.checked;
            document.body.scrollTop = window.innerHeight;
        });
        if (s.nightMode) {
            document.getElementById("night").setAttribute("checked", "checked");
            document.documentElement.classList.add("night");
        }
    }
    this.hcenter = function() {
        return Math.round(this.element.width / 2);
    }
    this.vcenter = function() {
        return Math.round(this.element.height / 2);
    }
    this.fontSize = function() {
        return (Math.min(this.hcenter(), this.vcenter()) / 4);
    }
    this.runit = function() {
        return (Math.min(this.hcenter(), this.vcenter()) / 3);
    }
    this.isNight = function() {
        var now = new Date();
        return (
            now.getHours() < this.nightEnd ||
            now.getHours() >= this.nightStart
        );
    }
    this.nightMode = this.isNight();

this.resize = function() {
        this.element.width = Math.min(
            this.element.parentNode.offsetWidth,
            this.element.parentNode.getBoundingClientRect().width
        ) * 1;
        this.element.height = Math.min(
            this.element.parentNode.offsetHeight,
            this.element.parentNode.getBoundingClientRect().height
        ) * 1;
    }
    this.init = function() {
        this.attach();
        this.resize();
        this.draw();
    };

this.draw = function() {
        window.requestAnimationFrame(this.draw.bind(this));
        this.context.textAlign = "center";
        this.context.lineCap = "round";
        this.context.lineWidth = 1.333;
        this.context.font = this.fontWeight + " " + this.fontSize() + "px " + this.fontFamily;
        this.context.translate(this.hcenter(), this.vcenter());
        this.context.setTransform(1, 0, 0, 1, this.hcenter(), this.vcenter());
        var now = new Now();
        var displayText = [
            now.hoursText(),
            now.minsText(),
            now.secsText()
        ].join("·");

this.context.globalCompositeOperation = "source-over";
        this.context.fillStyle = "rgba(0, 0, 0, 1)";
        this.context.beginPath();
        this.context.moveTo(0, 0);
        this.context.arc(
            0,
            0,
            this.runit() * 3,
            this.rotationOffset + (Math.PI * 2 * now.hoursPrcnt()),
            this.rotationOffset + (Math.PI * 2 * now.dayPrcnt())
        );
        this.context.fill();

this.context.globalCompositeOperation = "source-in";
        this.context.fillStyle = "rgba(0, 0, 0, .06125)";
        this.context.beginPath();
        this.context.arc(
            0, 0,
            this.runit() * 2.5,
            0, Math.PI * 2
        );
        this.context.fill();

this.context.globalCompositeOperation = "destination-over";
        this.context.lineWidth = 1.125;
        this.context.strokeStyle = this.nightMode ? this.nightAccent : this.accent;
        this.context.beginPath();
        this.context.moveTo(0, 0);
        this.context.arc(
            0, 0,
            this.runit() * 2.5,
            this.rotationOffset + (Math.PI * 2 * now.minsPrcnt()),
            this.rotationOffset + (Math.PI * 2 * now.hoursPrcnt())
        );
        this.context.lineTo(0, 0);
        this.context.stroke();

this.context.globalCompositeOperation = "destination-out";
        this.context.fillStyle = "rgba(0, 0, 0, 1)";
        this.context.beginPath();
        this.context.arc(0, 0, this.runit() * 2.25, 0, Math.PI * 2);
        this.context.fill();

this.context.globalCompositeOperation = "source-over";
        this.context.strokeStyle = "rgba(64, 64, 64, 1)";
        this.context.lineWidth = 2;
        this.context.beginPath();
        this.context.moveTo(
            this.runit() * 1.75 * Math.sin(Math.PI * 2 * now.hoursPrcnt()),
            0 - this.runit() * 1.75 * Math.cos(Math.PI * 2 * now.hoursPrcnt())
        );
        this.context.lineTo(
            this.runit() * 2.85 * Math.sin(Math.PI * 2 * now.hoursPrcnt()),
            0 - this.runit() * 2.85 * Math.cos(Math.PI * 2 * now.hoursPrcnt()));
        this.context.stroke();

this.context.globalCompositeOperation = "source-over";
        this.context.strokeStyle = "rgba(0, 0, 0, 1)";
        this.context.lineWidth = 8;
        this.context.beginPath();
        this.context.moveTo(
            this.runit() * 2.3333 * Math.sin(Math.PI * 2 * now.dayPrcnt()),
            0 - this.runit() * 2.3333 * Math.cos(Math.PI * 2 * now.dayPrcnt())
        );
        this.context.lineTo(
            this.runit() * 2.65 * Math.sin(Math.PI * 2 * now.dayPrcnt()),
            0 - this.runit() * 2.65 * Math.cos(Math.PI * 2 * now.dayPrcnt()));
        this.context.stroke();

this.context.globalCompositeOperation = "destination-over";

for (var hourb = 0; hourb < 12; hourb++) {
            if (
                hourb === now.now.getHours() % 12 ||
                hourb === now.now.getSeconds() / 60 * 12
            ) {
                this.context.fillStyle = this.nightMode ? this.nightAccent : this.accent;
            } else {
                this.context.fillStyle = prevFill;
            }
            this.context.beginPath();
            this.context.arc(
                Math.sin(Math.PI * 2 * hourb / 12) * this.runit() * 2.25,
                0 - Math.cos(Math.PI * 2 * hourb / 12) * this.runit() * 2.25, (hourb === now.now.getSeconds() / 60 * 12) ?
                this.runit() / 48 :
                this.runit() / 24,
                0,
                Math.PI * 2
            );
            this.context.fill();
        }
        this.context.fillStyle = prevFill;

this.context.globalCompositeOperation = "source-over";

this.context.fillText(
            displayText,
            0,
            0 + (this.fontSize() / 3)
        );

if (this.gauges) {
            var digits = parseInt(this.fontSize() / 30);
            this.context.font =
                this.fontWeight + " " +
                (this.fontSize() / 3) + "px " +
                this.fontFamily;
            this.context.fillText(
                [
                    now.dayPrcnt().toFixed(digits).substr(2),
                    now.hoursPrcnt().toFixed(digits).substr(2),
                    now.minsPrcnt().toFixed(digits).substr(2),
                    now.secsPrcnt().toFixed(digits).substr(2)
                ].join("  "),
                0,
                0 + (this.runit() / 1.75)
            );
        }
    };

}

function zeroPad(num, width) {
    return (new Array(width).fill("0").join("") + num).substr(0 - width)
}

var s = new Surface();
var helpEl = document.querySelector(".help");
s.init();

setTimeout(function() {
    document.body.scrollTop = document.body.querySelector(".container").offsetTop;
}, 5);

setTimeout(function() {
    if (document.body.scrollTop >= document.body.querySelector(".container").offsetTop) {
        showHelp();
        window.addEventListener("scroll", hideHelp);
        setTimeout(hideHelp, 7500);
    }
}, 1000);

function showHelp()  {
    helpEl.classList.remove("hidden");
}

function hideHelp() {
    helpEl.classList.add("hidden");
}

编译

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: inherit;
}
html {
    font-family: "Source Code Pro", "Courier New", monospace;
    font-weight: 500;
}
.day {
    color: #E11;
}
.night {
    color: #E04;
    /* inverse of desired color! */
    
    background-color: #111;
}
.controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.controls input {
    opacity: 0;
    position: absolute;
}
.controls label {
    cursor: pointer;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    line-height: 2;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.controls span:hover {
    color: #000;
    background-color: #FFF;
}
.controls span {
    background-color: #EEE;
    box-shadow: inset 0 0 0 0.5px #AAA;
    border-radius: 1em;
    color: #888;
    padding: .125em 1em;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.night .controls span {
    background-color: #222;
    color: #EEE;
}
.controls input:checked ~ span {
    box-shadow: inset 0 0 0 1px #F00;
    color: #000;
}
.night .controls input:checked ~ span {
    box-shadow: inset 0 0 0 1px #1FB;
    color: #EEE;
}
.night canvas {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
.container {
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}
body {
    min-height: 100%;
}
canvas {
    display: block;
}
.help {
    background-color: rgba(0, 0, 0, .05);
    border-radius: .5rem;
    width: auto;
    min-width: 0;
    max-width: 24em;
    margin: 0 auto;
    text-align: center;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    padding: .5rem 1rem;
    position: relative;
}
.help::after,
.help::before {
    font-size: 1.25rem;
    content: '\2191';
    position: absolute;
    top: 0.125rem;
}
.help::before {
    left: .75rem;
}
.help::after {
    right: .75rem;
}
.night .help {
    background-color: rgba(255, 255, 255, .05);
    color: #EEE;
}
.help.hidden {
    opacity: 0;
}
.hide {
    display: none;
}

HTML

Canvas Wall Clock with Night Mode

html5, canvas, clock

编辑器支持Emmet

快捷键

Canvas Wall Clock with Night Mode

html5, canvas, clock

HTML5 Canvas 超酷的粒子时钟+分散/聚合动画

使用HTML5/Canvas模拟的病毒传播扩散动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：