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 ...
随机推荐
- 图解HTTP第二章
简单的 HTTP 协议 1>HTTP 协议用于客户端和服务器端之间的通信 HTTP 协议和 TCP/IP 协议族内的其他众多的协议相同,用于客户端和服务器之间的通信.请求访问文本或图像等资源的一 ...
- Linux 第十天
十三.权限管理 1.ACL权限开启 1)dumpe2fs -h /dev/sda3查看分区ACL权限是否开启 -h:仅显示超级块中信息,而不显示磁盘块组的详细信息 2)mount -o remount ...
- ABP框架系列之三十：(Javascript-API-Javascript-API)
ASP.NET Boilerplate provides a set of objects and functions that are used to make javascript develop ...
- 走进JDK(二)------String
本文基于java8. 基本概念: Jvm 内存中 String 的表示是采用 unicode 编码 UTF-8 是 Unicode 的实现方式之一 一.String定义 public final cl ...
- cp备份操作时如何忽略指定的目录
需求场景:进行CP拷贝备份的时候,子目录里面的某些大文件或是一些log文件是无需备份的,那么在CP操作时需要忽略掉指定的目录. 案例演示如下:备份data目录,但是不包括里面的share子目录. 先看 ...
- 迁移桌面程序到MS Store（5）——.NET Standard
接下来的几篇,我想讨论下迁移桌面程序到MS Store,可以采用的比较常见.通用性比较强的实施步骤和分层架构. 通常商业项目一般都是不断的迭代,不太可能突然停止更新现有的桌面版本,然后花很长时间从头来 ...
- Java字符串池（String Pool）深度解析
版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 在工作中,String类是我们使用频率非常高的一种对象类型.JVM为了提升性能和减少内存开销,避免字符串的重复创建,其维护了一块特殊的内存 ...
- select 的问题
#include <errno.h> #include <string.h> #include <fcntl.h> #include <sys/socket. ...
- Behavior Tree 用 Lua 实现一个最简行为树
local function Traverse(node, ...) local t = node.type if t == SELECTOR then , #node do if Traverse( ...
- markdown上下左右，跳至行尾行首，重设快捷键
概述 用markdown输入代码的时候觉得下面2件事非常不方便: (1)光标上下左右.(需要挪动手去按方向键) (2)光标跳至行尾和行首.(需要动手去按Home和End键) 为了简化,我特地更改了ST ...