时钟制作-白红宇

时钟制作

阅读量：6266 次

发布时间：2019-06-22

本文共 2124 字，大约阅读时间需要 7 分钟。

<!DOCTYPE html>

<head>

onload = function () {

setInterval(oCarw, 1000);//间隔1秒画一次

}

function oCarw() {

//需求1. 跟系统时间一致

var oDate = new Date();//获取时间对象

var oHours = oDate.getHours();// 获取到时

var oMin = oDate.getMinutes();//获取到分

var oSec = oDate.getSeconds();//获取到秒

//换算成弧度

var oHoursValue = (-90 + oHours * 30) * Math.PI / 180;

var oMinValue = (-90 + oMin * 6) * Math.PI / 180;

var oSecValue = (-90 + oSec * 6) * Math.PI / 180;

var oc = document.getElementById("d1");

var ogc = oc.getContext("2d");

ogc.clearRect(0, 0, 200, 200);//清空画布

ogc.beginPath();

for (var i = 0; i < 60; i++) {

ogc.moveTo(200, 200);

//1.空心圆圆心坐标 xy（200,200）2，150（半径）3,起点弧度 4，画了90度 5，false顺时针画 true逆时针画

ogc.arc(200, 200, 150, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);

}

ogc.closePath();

ogc.stroke();

//画一个小于外圆的白色的实心圆

ogc.beginPath();

ogc.moveTo(200, 200);

ogc.fillStyle = "#fff";

ogc.arc(200, 200, 150 * 19 / 20, 0, 360 * Math.PI / 180, false);

ogc.closePath();

ogc.fill();

//加粗刻度 12点 1点

ogc.beginPath();

ogc.lineWidth = 3;

for (var i = 0; i < 12; i++) {

ogc.moveTo(200, 200);

ogc.arc(200, 200, 150, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);

}

ogc.closePath();

ogc.stroke();

//白色的实心圆覆盖

ogc.beginPath();

ogc.moveTo(200, 200);

ogc.fillStyle = "#fff";

ogc.arc(200, 200, 150 * 18 / 20, 0, 360 * Math.PI / 180, false);

ogc.closePath();

ogc.fill();

//画时针分针秒针

ogc.lineWidth = 5;

ogc.beginPath();

ogc.moveTo(200, 200);

ogc.arc(200, 200, 150 * 8 / 20, oHoursValue, oHoursValue, false);

ogc.closePath();

ogc.stroke();

//画分针

ogc.lineWidth = 3;

ogc.beginPath();

ogc.moveTo(200, 200);

ogc.arc(200, 200, 150 * 13 / 20, oMinValue, oMinValue, false);

ogc.closePath();

ogc.stroke();

//画秒针

ogc.lineWidth = 1;

ogc.beginPath();

ogc.moveTo(200, 200);

ogc.arc(200, 200, 150 * 17 / 20, oSecValue, oSecValue, false);

ogc.closePath();

ogc.stroke();

}

</script>

</head>

<body>

</body>

</html>

转载于:https://www.cnblogs.com/sunshinezjb/p/8550652.html

你可能感兴趣的文章

记录日常Linux常用软件

查看>>

Jmeter之Bean shell使用(一)

asp.net 批量下载实现（打包压缩下载）

查看>>

解决了！我滴神哪！MarketPlace为什么手动下载安装部署提示invalid详解

查看>>

主成分分析原理及推导

查看>>

python中获取指定目录下所有文件名列表的程序

查看>>

HTML5的本地存储 LocalStorage

查看>>

safari和ie的时间解析（显示为NAN）

查看>>

基于 HTML5 WebGL 的挖掘机 3D 可视化应用

查看>>

Java工具创建密钥库，用于Unity 3D打包、签名、发布

2784: 【提高】小 X 与煎饼达人(flip)

查看>>

Linux 常用的压缩命令有 gzip 和 zip