canvas炫酷时钟

Html

Css

* {
	margin:0;
	padding:0
}
canvas {
	background:#222;
}
body,html {
	background:#222;
	width:100%;
	height:100%;
	text-align:center;
}
* {
	margin:0;
	padding:0
}
canvas {
	background:#222;
}
body,html {
	background:#222;
	width:100%;
	height:100%;
	text-align:center;
}

window.onload = function() {
    function d2a(n) { //角度转弧度
        return n * Math.PI / 180;
    };

function ran(n, m) {
        return parseInt(Math.random() * (m - n)) + n
    };

function fillZero(n) {
        return n > 10 ? n : '0' + n
    }

var oCan = document.querySelector('canvas');
    var gd = oCan.getContext('2d');

setInterval(function() {
        gd.clearRect(0, 0, oCan.width, oCan.height);
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        var ms = date.getMilliseconds();

drawArc(0, ms / 1000 * 360, 94, getColor(), 1, true);

drawArc(0, h % 12 * 30 + m / 60 * 30, 100, getColor(), 3);

drawArc(0, m * 6 + s / 60 * 6, 108, getColor(), 3);

drawArc(0, s * 6 + ms / 1000 * 6, 116, getColor(), 3);

gd.textAlign = 'center';
        gd.textBaseline = 'middle';
        gd.lineWidth = 1;
        gd.strokeStyle = '#eee';
        gd.strokeText('时钟', 250, 190);
        gd.strokeText(fillZero(h) + ':' + fillZero(m) + ':' + fillZero(s), 250, 210);

}, 10);

function drawArc(start, end, r, color, width, bl) {
        start = start - 90;
        end = end - 90;
        gd.beginPath();
        gd.arc(250, 200, r, d2a(start), d2a(end), bl);
        gd.strokeStyle = color;

gd.lineWidth = width;
        gd.stroke();
    };

function getColor() {
        var R = ran(0, 256).toString(16);
        var G = ran(0, 256).toString(16);
        var B = ran(0, 256).toString(16);

return '#' + R + G + B;
    }

}

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

立即下载

canvas炫酷时钟



代码描述：canvas炫酷时钟

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

liushaoye

相关代码

canvas炫酷时钟

最新