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多线程系列2 线程常见方法介绍
守护线程 执行一些非业务方法,比如gc.当全部都是守护线程的时候,jvm退出 线程优先级 设置线程优先级:setPriority(int priorityLevel).参数priorityLevel ...
- java多线程系列7 高级同步工具(1)信号量Semaphore
Semaphore叫做信号量 可以控制某个资源可被同时访问的个数, acquire() 获取一个许可,得到许可才能执行后面的代码,如果没有就等待. release() 释放一个许可. 当信号量的只允许 ...
- qhfl-2 ContentType组件
一般商城里有很多的商品,计优惠券对应着活动类型商品,家电是一类商品,食物是一类商品,优惠券对应着不同的商品类别. from django.db import models class Applianc ...
- PowerShell 使用.NetFramework
我们都知道,由于PowerShell是基于.NETFramework建立的所以它能够具备访问.NET的能力,因为.NET提供了庞大的数据类库,所以我们可以很好的使用PowerShell去完成一些Pow ...
- 前端基于easyui的mvc扩展
背景 由于MVC的前端是基于jquery.validate和jquery.validate.unobtrusive来实现的,但是当我们要使用其他的ui组件且组件本身就带有完整的验证功能的话,那么要让它 ...
- python3调用zabbix api
前言 今天写了一个zabbix api,这里整理一下,过程中自己也学习了一些东西. 需求 我们需要查一个文件内容如下: cat /ops/flume_hosts node1 node2 需要把这个文件 ...
- 32 bit 与 64 bit 程序（1）如何识别？
一, 怎样判断一个exe可执行程序是32位的还是64位的? 简单的方法: 一般来说在64位的windows7下,打开任务管理器可以知道哪些程序是32位的哪些是64位的,但是因为自己的电脑是64位的wi ...
- C/C++ 的宏中#和##的作用和展开
C/C++ 的宏中: (1) # 的功能是将其后面的宏参数进行字符串化操作,简单说就是在对它所引用的宏变量通过替换后在其左右各加上一个双引号. 也就是说: #define __TO_STRING_IM ...
- CentOS6最佳实践
一 安装常用软件 常用目录结构 源文件目录 /application,原包文件及解压文件 如 /application/Python-3.6.0.tgz 软件配置目录 /usr/local/ 如 ...
- 常用string格式化
1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) string.Format("{0:C}",0.2) 结果为:￥0.20 (英文操作系统结果:$0 ...