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 ...
随机推荐
- java内存性能调优编码注意
1.没有必要时请不用使用静态变量 使用Java的开发者都知道,当某个对象被定义为stataic变量所引用,这个对象所占有的内存将不会被回收.有时,开发者会将经常调用的对象或者变量定义为static,以 ...
- C#延时函数
用Thread方法: 先using system.threading; 再在需要延时的进程处插入 thread.sleep(int);
- EBR内容解析
原先博客放弃使用,几篇文章搬运过来 EBR(Extended Boot Record)即扩展分区引导记录.类似于主引导记录MBR.因为MBR的四条分区信息的限制,可以使用EBR方便扩展. 它的结构与M ...
- 如果你要查看文件的每个部分是谁修改的, 那么 git blame 就是不二选择
原文: http://gitbook.liuhui998.com/5_5.html 如果你要查看文件的每个部分是谁修改的, 那么 git blame 就是不二选择. 只要运行'git blame [f ...
- Unix时间戳转日期时间格式，C#、Java、Python各语言实现！
之前有个Q上好友没事问我,怎么自己写Unix时间戳转日期时间?于是我就顺手写了个C#版本给他!最近想起来,就萌发多写几个语言的版本分享,权当练习思路外加熟悉另外两种语言. 先说转换步骤 先处理年份,从 ...
- 《深入理解JAVA虚拟机》——学习笔记
JVM内存模型以及分区 JVM内存分为: 1.方法区:线程共享的区域,存储已经被虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据 2.堆:线程共享的区域,存储对象实例,以及给数组分配的 ...
- 在虚拟机上安装redis集群，redis使用版本为4.0.5,本机通过命令客户端可以连接访问，外部主机一直访问不了
在虚拟机上安装了redis 4 ,启动后本机客户端可以连接访问,但是外部主机一直访问不了,在使用java代码连接redis集群时报:no reachable node in cluster,原因:在r ...
- liunx下判断有线网口硬件是否正常的三个常用方式
第一种,命令法: /mnt/wifi$ cat /proc/net/dev Inter-| Receive ...
- 算法手记（2）Dijkstra双栈算术表达式求值算法
这两天看到的内容是关于栈和队列,在栈的模块发现了Dijkstra双栈算术表达式求值算法,可以用来实现计算器类型的app. 编程语言系统一般都内置了对算术表达式的处理,但是他们是如何在内部实现的呢?为了 ...
- 10-部署配置dashboard插件
配置和安装 dashboard 官方文件目录:kubernetes/cluster/addons/dashboard 我们需要使用的yaml文件 $ ls *.yaml dashboard-contr ...