- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>HTML CLOCK</title>
- </head>
- <body>
- <canvas width="500" height="500" id="clock">你的浏览器不支持canvas标签,时针显示不出来哦!
- </canvas>
- <script type="text/javascript">
- //画布背景颜色
- var clockBackGroundColor = "#ABCDEF";
- //时针颜色
- var hourPointColor = "#000";
- //时针粗细
- var hourPointWidth = 7;
- //时针长度
- var hourPointLength = 100;
- //分针颜色
- var minPointColor = "#000";
- //分针粗细
- var minPointWidth = 5;
- //分针长度
- var minPointLength = 150;
- //秒针颜色
- var secPointColor = "#F00";
- //秒针粗细
- var secPointWidth = 3;
- //秒针长度
- var secPointLength = 170;
- //表盘颜色
- var clockPanelColor = "#ABCDEF";
- //表盘刻度颜色
- var scaleColor = "#000";
- //表盘大刻度宽度 3 6 9 12
- var scaleBigWidth = 9;
- //表盘大刻度的长度
- var scaleBigLength = 15;
- //表盘小刻度的宽度
- var scaleSmallWidth = 5;
- //表盘小刻度的长度
- var scaleSmallLength = 10;
- //圆心颜色
- var centerColor = 'red';
- //时钟画布
- var clock = document.getElementById('clock');
- clock.style.background = clockBackGroundColor;
- //时针画布的作图环境(画板)
- var panel = clock.getContext('2d');
- //画线
- /**
- *画线段
- *
- *
- */
- function drowLine(p, width, color, startX, startY, endX, endY, ran, cX, cY) {
- //保存传入的画板,相当于每次作画新开一个图层
- p.save();
- //设置画笔宽度
- p.lineWidth = width;
- //设置画笔颜色
- p.strokeStyle = color;
- //新开启作图路径,避免和之前画板上的内容产生干扰
- p.beginPath();
- p.translate(cX, cY);
- //旋转
- p.rotate(ran);
- //移动画笔到开始位置
- p.moveTo(startX, startY);
- //移动画笔到结束位置
- p.lineTo(endX, endY);
- //画线操作
- p.stroke();
- //关闭作图路径,避免和之后在画板上绘制的内容产生干扰
- p.closePath();
- //在传入的画板对象上覆盖图层
- p.restore();
- }
- /**
- *画水平线
- */
- function drowHorizontalLine(p, width, length, color, startX, startY, ran, cX, cY) {
- drowLine(p, width, color, startX, startY, startX + length, startY, ran, cX, cY);
- }
- /**
- *画圈圈
- */
- function drowCircle(p, width, color, centreX, centreY, r) {
- p.save();
- //设置画笔宽度
- p.lineWidth = width;
- //设置画笔颜色
- p.strokeStyle = color;
- //新开启作图路径,避免和之前画板上的内容产生干扰
- p.beginPath();
- //画圈圈
- p.arc(centreX, centreY, r, 0, 360, false);
- //画线操作
- p.stroke();
- //关闭作图路径,避免和之后在画板上绘制的内容产生干扰
- p.closePath();
- //在传入的画板对象上覆盖图层
- p.restore();
- }
- function drowPoint(p, width, color, centreX, centreY, r) {
- p.save();
- //设置画笔宽度
- p.lineWidth = width;
- //设置画笔颜色
- p.fillStyle = color;
- //新开启作图路径,避免和之前画板上的内容产生干扰
- p.beginPath();
- //画圈圈
- p.arc(centreX, centreY, r, 0, 360, false);
- //画线操作
- p.fill();
- //关闭作图路径,避免和之后在画板上绘制的内容产生干扰
- p.closePath();
- //在传入的画板对象上覆盖图层
- p.restore();
- }
- function drowScales(p) {
- //画小刻度
- for (var i = 0; i < 60; i++) {
- drowHorizontalLine(p, scaleSmallWidth, scaleSmallLength, scaleColor, 195 - scaleSmallLength, 0, i * 6 * Math.PI / 180, 250, 250);
- }
- //画大刻度
- for (var i = 0; i < 12; i++) {
- drowHorizontalLine(p, i % 3 == 0 ? scaleBigWidth * 1.2 : scaleBigWidth, i % 3 == 0 ? scaleBigLength * 1.2 : scaleBigLength, scaleColor, 195 - scaleBigLength, 0, i * 30 * Math.PI / 180, 250, 250);
- //可以添加数字刻度
- }
- }
- function drowHourPoint(p, hour) {
- drowHorizontalLine(p, hourPointWidth, hourPointLength, hourPointColor, -10, 0, (hour - 3) * 30 * Math.PI / 180, 250, 250);
- }
- function drowMinPoint(p, min) {
- drowHorizontalLine(p, minPointWidth, minPointLength, minPointColor, -15, 0, (min - 15) * 6 * Math.PI / 180, 250, 250);
- }
- function drowSecPoint(p, sec) {
- drowHorizontalLine(p, secPointWidth, secPointLength, secPointColor, -15, 0, (sec - 15) * 6 * Math.PI / 180, 250, 250);
- }
- function drowClock() {
- panel.clearRect(0, 0, 500, 500);
- panel.fillText("联系作者 Kerbores@gmail.com", 10, 20);
- panel.fillText("http://kipy.xicp.net", 10, 40);
- var date = new Date();
- var sec = date.getSeconds();
- var min = date.getMinutes();
- var hour = date.getHours() + min / 60;
- drowCircle(panel, 7, 'blue', 250, 250, 200);
- drowScales(panel);
- drowHourPoint(panel, hour);
- drowMinPoint(panel, min);
- drowSecPoint(panel, sec);
- drowPoint(panel, 1, centerColor, 250, 250, 7);
- //drowHorizontalLine(panel,10,10,'red',-5,0,0,250,250);
- }
- //drowHorizontalLine(panel,7,30,'#F00',0,0,Math.PI,250,250);
- drowClock();
- setInterval(drowClock, 1000);
- function save() {
- var image = clock.toDataURL("image/png").replace("image/png", "image/octet-stream");
- location.href = image;
- }
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/040520149462.html
来源: http://www.codesnippet.cn/detail/040520149462.html