前端canvas制作仿iwatch时钟
摘要：前端本地开发环境 网站开发 前端 外包 网站开发后台前端数据库 html 代码 <!doctype html> <html> <head> <meta charset=”UTF-8″> <title>Title</title>……
前端本地开发环境 网站开发 前端 外包 网站开发后台前端数据库
html 代码
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #000;
text-align: center;
}
canvas {
background: #fff;
}
</style>
<script>
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>
<canvas id=”c1″ width=”800″ height=”600″></canvas>
</body>
</html>
前端开发中的测试环境 前端还用安装开发环境吗 配置前端开发环境
» 本文来自：前端开发者 » 《前端canvas制作仿iwatch时钟》
» 本文链接地址：https://www.rokub.com/5388.html
» 您也可以订阅本站：https://www.rokub.com
近期评论