前端canvas制作仿iwatch时钟

前端本地开发环境网站开发前端外包网站开发后台前端数据库

html 代码

<!doctype html>

<html>

<head>

<title>Title</title>

<style>

* {

margin: 0;

padding: 0;

}

body {

background: #000;

text-align: center;

}

canvas {

background: #fff;

}

</style>

function toDou(iNum) {

return iNum < 10 ? ‘0’ + iNum : ” + iNum;

}

function d2a(n) {

return n * Math.PI / 180;

}

window.onload = function () {

var oC = document.getElementById(‘c1’);

var gd = oC.getContext(‘2d’);

var cx = oC.width / 2,

cy = oC.height / 2;

function clock() {

gd.clearRect(0, 0, oC.width, oC.height);

var oDate = new Date();

var H = oDate.getHours() % 12;

var M = oDate.getMinutes();

var S = oDate.getSeconds();

var MS = oDate.getMilliseconds();

drawArc(60, 0, (H * 30 + M / 60 * 30), ‘orange’);

drawArc(80, 0, (M * 6 + S / 60 * 6), ‘purple’);

drawArc(100, 0, (S * 6 + MS / 1000 * 6), ‘aqua’);

var str = toDou(H) + ‘:’ + toDou(M) + ‘:’ + toDou(S);

gd.font = ’20px 微软雅黑’;

gd.textAlign = ‘center’;

gd.textBaseline = ‘middle’;

gd.fillText(str, cx, cy);

}

clock()

setInterval(clock, 1);

function drawArc(r, s, e, color) {

color = color || ‘black’;

gd.beginPath();

gd.arc(cx, cy, r, d2a(s – 90), d2a(e – 90), false);

gd.strokeStyle = color;

gd.lineWidth = 20;

gd.stroke();

}

};

</script>

</head>

<body>

</body>

</html>

前端开发中的测试环境前端还用安装开发环境吗配置前端开发环境

» 本文来自：前端开发者 » 《前端canvas制作仿iwatch时钟》

» 本文链接地址：https://www.rokub.com/5388.html

» 您也可以订阅本站：https://www.rokub.com

前端canvas制作仿iwatch时钟

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

回顶部

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

回顶部

评论抢沙发