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 ...
随机推荐
- LOJ-10102（桥的判断）
题目链接:传送门 思路:找桥就行了,条件是num[v]<low[u],pre!=v; #include<iostream> #include<cstdio> #inclu ...
- MD5盐值加密
加密思路 思路解析:(数据解析过程基于16进制来处理的,加密后为16进制字符串) 加密阶段: 对一个字符串进行MD5加密,我们需要使用到MessageDigest(消息摘要对象),需要一个盐值(sal ...
- 基于UML的公开招聘教师管理系统建模的研究和设计
一.基本信息 标题:基于UML的公开招聘教师管理系统建模的研究和设计 时间:2018 出版源:赤峰学院学报(自然科学版) 领域分类:UML:公开招聘教师系统:面向对象方法:建模. 二.研究背景 问题定 ...
- android启动画面隐藏状态栏全屏显示
1.在根部局给一个id,然后直接设置就行了layout.setSystemUiVisibility(View.INVISIBLE); 状态栏就没有了. 2.如果你只是想改变状态栏颜色的也可以 //5. ...
- 任务调度及远端管理（基于Quartz.net）
这篇文章我们来了解一些项目中的一个很重要的功能:任务调度 可能有些同学还不了解这个,其实简单点说任务调度与数据库中的Job是很相似的东西 只不过是运行的物理位置与管理方式有点不一样,从功能上来说我觉得 ...
- AJPFX简述：MetaTrader 4移动交易平台
(AJPFX)移动交易平台可以让客户随时通过客户手中的移动设备例如智能手机.PDA等管理自己帐户和进行交易.移动交易平台提供了完整的交易帐户管理分析选项,当客户无法使用台式计算机的时候,移动交易平台为 ...
- sku 和 spu
https://www.jianshu.com/p/867429702d5a 里面的图片挺好的
- JavaScript高级程序设计--函数小记
执行环境和作用域链 每个函数都有自己的执行环境.当执行流进入一个函数时,函数 的环境就会被推入一个环境栈中.而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境. 当代码在一个环境中 ...
- Android数据存储之SQLite使用
SQLite是D.Richard Hipp用C语言编写的开源嵌入式数据库引擎.它支持大多数的SQL92标准,并且可以在所有主要的操作系统上运行. 在Android中创建的SQLite数据库存储在:/d ...
- JavaScript的BOM编程，事件-第4章
目标 BOM编程 window和document对象 window对象的属性和方法 document对象的属性和方法 JavaScript中对象的分类 浏览器对象:window对象 window对象, ...