JavaScript实现iphone时钟
看效果（欢迎各位同学推荐更好的gif制作软件）
请看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
padding: 0;
margin: 0;
background-color: rgba(0, 0, 0, 1);
} canvas {
background-color: rgba(255, 255, 255, 1);
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<canvas id="clock" width="600" height="600">当前浏览器不支持Canvas</canvas>
<script>
(function(){
let canvas = document.querySelector("#clock");
let ctx = canvas.getContext("2d");
existRequestAnimationFrame();
draw(ctx);
})();
function existRequestAnimationFrame(){
var vendors = ['webkit', 'moz'];
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
var vp = vendors[i];
window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
}
if(!window.requestAnimationFrame){
var lastTime = 0;
window.requestAnimationFrame = function(callback){
var now = new Date().getTime();
var nextTime = Math.max(lastTime + 16, now);//浏览器渲染的间隔时间大约16ms
return window.setTimeout(function(){
callback(lastTime = nextTime);
},nextTime - now);
};
}
}
function draw(ctx){
requestAnimationFrame(function step(){
drawDial(ctx); //绘制表盘
drawAllHands(ctx); //绘制时分秒针
requestAnimationFrame(step);
});
}
/*绘制时分秒针*/
function drawAllHands(ctx){
let time = new Date();
let s = time.getSeconds(),m = time.getMinutes(),h = time.getHours();
let pi = Math.PI;
let secondAngle = pi / 180 * 6 * s + time.getMilliseconds()*pi*6/1000/180; //计算出来s针的弧度
let minuteAngle = pi / 180 * 6 * m + secondAngle / 60; //计算出来分针的弧度
let hourAngle = pi / 180 * 30 * h + minuteAngle / 12; //计算出来时针的弧度
drawHand(hourAngle, 90, 6, "NavyBlue", ctx); //绘制时针
drawHand(minuteAngle, 146, 4, "black", ctx); //绘制分针
drawHand(secondAngle, 248, 2, "red", ctx); //绘制秒针
}
/* 绘制时针、或分针、或秒针
* 参数1：要绘制的针的角度
* 参数2：要绘制的针的长度
* 参数3：要绘制的针的宽度
* 参数4：要绘制的针的颜色
* 参数4：ctx
* */
function drawHand(angle, len, width, color, ctx){
ctx.save();
ctx.translate(300, 300); //把坐标轴的远点平移到原来的中心
ctx.rotate(-Math.PI / 2 + angle); //旋转坐标轴。 x轴就是针的角度
ctx.beginPath();
ctx.moveTo(-4, 0);
ctx.lineTo(len, 0); // 沿着x轴绘制针
ctx.lineWidth = width;
ctx.strokeStyle = color;
ctx.lineCap = "round";
ctx.stroke();
ctx.closePath();
ctx.restore();
}
/*绘制表盘*/
function drawDial(ctx){
let pi = Math.PI;
ctx.clearRect(0, 0, 600, 600); //清除所有内容
ctx.save(); //设置canvas四边角弧度区域为背景色
ctx.translate(0, 0);
ctx.beginPath();
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0,0,600,600);
ctx.fill();
ctx.translate(300, 300);
ctx.beginPath();
ctx.arc(0, 0, 300, 0, 2 * pi); //绘制圆周
ctx.fillStyle = 'rgb(255,255,255)';
ctx.fill();
ctx.stroke();
ctx.closePath();
//绘制数字
for (let i = 0; i < 12; i++){
let deg = -pi / 2 + i * pi / 6 + pi / 180 * 30,//旋转的角度
text = (i+1)+'';//数值
ctx.save();
ctx.beginPath();
ctx.font = '27px Microsoft Yahei';
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillText(text, 250*Math.cos(deg) - 6, 250*Math.sin(deg) + 7);
ctx.restore();
}
ctx.restore();
}
</script>
</body>
</html>
转载请注明出处，谢谢~
参考资料
http://www.w3school.com.cn/tags/html_ref_canvas.asp
http://www.runoob.com/html/html5-canvas.html
https://blog.csdn.net/u012468376/article/details/73350998
JavaScript实现iphone时钟的更多相关文章
- canvas ：原生javascript编写动态时钟
canvas :原生javascript编写动态时钟 此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...
- 简单的javascript实例一(时钟特效)
方便以后copy 时钟特效 <html> <head> <meta http-equiv="Content-Type" content="t ...
- JavaScript之“创意时钟”项目
“时钟展示项目”说明文档(文档尾部附有相应代码) 一.最终效果展示: 二.项目亮点 1.代码结构清晰明了 2.可以实时动态显示当前时间与当前日期 3.界面简洁.美观.大方 4.提高浏览器兼容性 三.知 ...
- JavaScript超酷时钟的制作
<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- FusionCharts可使用JavaScript渲染iPhone/iPod/iPad图表
FusionCharts使用JavaScript: FusionCharts允许用户创建建立JavaScript图表(也就是web上的HTML5 /Canvas图表).这个特性允许用户在不支持Flas ...
- javascript判断iphone/android手机横竖屏模式的函数
function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-d ...
- HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题
1.执行以下解决方案条件:(这个是原理) ①执行复制方法时 所复制文字不能被任何 块级元素和行内块元素和行内元素遮盖否则无效:(解决方案:将文本通过绝对定位或其他方式移除屏幕外) ②ios中不能复制属 ...
- 【javascript】基于javascript的小时钟
计时事件:通过JavaScript,我们可以设置在一段时间间隔后执行一段代码,而不仅仅是在函数调用后立即执行. 在JavaScript中,使用计时事件是很容易的,主要有两个事件供我们使用 setTim ...
- JavaScript实现数字时钟功能
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
随机推荐
- php5.6 phpmystudy 版本出问题
No input file specified的解决方法 https://jingyan.baidu.com/article/f7ff0bfccce11c2e26bb1381.html
- app已损坏，打不开。你应该将它移到废纸篓
首先声明: 有可能并非你安装的软件已损坏,而是Mac系统的安全设置问题,因为这些应用都是破解或者汉化的,那么解决方法就是临时改变Mac系统安全设置. 出现这个问题的解决方法: 修改系统配置:系统偏好设 ...
- vue-学习系列之vue双向绑定原理
一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. var obj = { }; // 为obj定义一个名为 hel ...
- 【jenkins git】Failed to connect to repository:Error performing command:git.exe ls-remote-h
jenkins使用git源码管理报错:Failed to connect to repository:Error performing command:git.exe ls-remote-h 本机需要 ...
- Alpha冲刺 - (8/10)
Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 进一步优化代码,结合自己负责的部分修 ...
- CentOS6最佳实践
一 安装常用软件 常用目录结构 源文件目录 /application,原包文件及解压文件 如 /application/Python-3.6.0.tgz 软件配置目录 /usr/local/ 如 ...
- 如何运用kali-xplico网络取证分析？点开看看吧
0x00前言: 本工具仅供安全技术学习和教育用途,禁止非法使用! 前方高能 建议物理机选作,虚拟机快照,万一你那个东西做错了,我还得背锅0x01介绍: Xplico网络数据取证工具 ...
- MySQL 数据类型说明解释
在 MySQL 中,有三种主要的类型:Text(文本).Number(数字)和 Date/Time(日期/时间)类型. Text 类型: 数据类型 描述 CHAR(size) 保存固定长度的字符串(可 ...
- 你不知道的javascript读书笔记3
概述 这是我看<你不知道的JavaScript(中卷)>中关于类型检查的笔记,供以后开发时参考,相信对其他人也有用. typeof 我们知道js中有七种内置类型:undefined, nu ...
- C# GroupBy分组的问题和解决
起因 今天在公司做一个需求的时候,写的是面条代码,一个方法直接从头写到尾,其中用到了GroupBy,且GroupBy的KeySelector是多个属性而不是单个属性. 但是公司最近推行Clean Co ...