canvas实现的时钟效果
最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果。
首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小。
因为一个圆是360度,所以数字之间就是360/12=30度,所以我在圆上画出数字的代码是这样的:
drawNumber:function(){
this.context.save();
for(var i = 1;i < 13; i++){
var angle = i*30;
angle = angle*Math.PI/180;
var x = Math.round(Math.sin(angle)*(this.r-20));
var y = Math.round(-Math.cos(angle)*(this.r-20));
this.context.fillStyle="#8DA6B8";
this.context.font = "bold 20px Calibri";
this.context.textAlign = "center";
this.context.textBaseline = "middle";
this.context.fillText(i,x+this.widths/2,y+this.heights/2);
}
this.context.restore();
},
因为Math.cos()和Math.sin()接受的都是弧度制,所以需要把30度转换成对应的弧度喔。
其次,我们来看看怎么画时钟上的时针、分针以及秒针。
因为时针、分针、秒针要随着时间的改变而改变,所以我们需要获取当前时间以及context.translate(this.widths/2,this.heights/2);context.rotate(rotate);来对时针、分针、秒针的旋转。
其中时针的旋转弧度是:hrotate = (h*30+(m/60)*30+(s/3600)*30)*Math.PI/180; (ps:每过一个小时,时针就需要旋转30度)
分针的旋转弧度是:mrotate = (m*6+(s/60)*6)*Math.PI/180;(ps:每过一分钟,分针就需要旋转6度)
秒针的旋转弧度是:srotate = (s*6)*Math.PI/180;(ps:每过一秒,秒针就需要旋转6度)
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var hrotate = (h*30+(m/60)*30+(s/3600)*30)*Math.PI/180;
var mrotate = (m*6+(s/60)*6)*Math.PI/180;
var srotate = (s*6)*Math.PI/180;
// console.log(h + ':' + m + ':' + s); //时针
this.context.save();
this.context.translate(this.widths/2,this.heights/2);
this.context.save();
this.context.rotate(hrotate);
this.context.beginPath();
this.context.lineCap="round";
this.context.moveTo(0,0);
this.context.lineTo(0,-40);
this.context.strokeStyle="#1AA9D8";
this.context.lineWidth=6;
this.context.stroke();
this.context.closePath();
this.context.restore();
//分针
this.context.save();
this.context.rotate(mrotate);
this.context.beginPath();
this.context.lineCap="round";
this.context.moveTo(0,0);
this.context.lineTo(0,-50);
this.context.strokeStyle="#23BCEF";
this.context.lineWidth=4;
this.context.stroke();
this.context.closePath();
this.context.restore();
//秒针
this.context.save();
this.context.rotate(srotate);
this.context.beginPath();
this.context.lineCap="round";
this.context.moveTo(0,0);
this.context.lineTo(0,-65);
this.context.strokeStyle="#23BCEF";
this.context.lineWidth=1;
this.context.stroke();
this.context.closePath();
this.context.restore();
this.context.restore();
最后,使用setInterval()方法来实现画布的周期性更新,在每次绘画之前需要先将画布清空哟,要不然,嘿嘿,你懂的。
这样我们的时钟就完成了,canvas是不是也很赞呀!好了,canvas时钟就讲到这啦,有什么讲的不对的地方希望各位大神指正,小女子在此谢过!
canvas实现的时钟效果的更多相关文章
- canvas实现简易时钟效果
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- transform实现的时钟效果
又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...
- 利用js+canvas实现的时钟效果图
canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...
- canvas自适应圆形时钟绘制
前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...
- canvas炫酷时钟
canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...
- 圆盘时钟效果 原生JS
圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...
- Flash AS实现时钟效果(全脚本实现)
最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...
- 酷!使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
随机推荐
- UVA796 - Critical Links(Tarjan求桥)
In a computer network a link L, which interconnects two servers, is considered critical if there are ...
- 【Loadrunner】LR破解版录制手机脚本
LR破解版录制手机脚本 最近在网上听到好多童鞋都在问如何用LR做手机性能测试,恰好自己对这方面也挺感兴趣,经过查阅很多资料,形成此文档以做备注~!如果有感觉我写的不对的地方,敬请指正 ...
- python 面向对象 字典 有序字典
和原来字典一模一样 把dict 传进去 相当于这个类就是一个字典 # 把dict 传进去 相当于这个类就是一个字典 class Mydict(dict): pass d = Mydict() prin ...
- android 异步线程刷新UI 以及 JSON解析 以及 url get请求
import android.os.Handler; import android.os.Message; 1. Handler mHandler = new Handler() { @Overrid ...
- vmware克隆虚拟机
克隆步骤 右键需要克隆的虚拟机 > 管理,在克隆向导中选择完整克隆. 实验环境:win10_64bit + vmware 12 pro + CentOS6.9_64bit 克隆之后网络配置 克隆 ...
- Web Services 平台元素SOAP、WSDL 、UDDI
Web Services 拥有三种基本的元素:SOAP.WSDL 以及 UDDI. 什么是 SOAP? SOAP 是一种使应用程序有能力通过 HTTP 交换信息的基于 XML 的简易协议.或者可以更简 ...
- c/c++ json使用
比如出名的有CJson,c++一般用jsoncpp http://sourceforge.net/projects/jsoncpp/ jsoncpp:http://www.cnblogs.com/fe ...
- Python常用模块(logging&re&时间&random&os&sys&shutil&序列化&configparser&&hashlib)
一. logging(日志模块) 二 .re模块 三. 时间模块 四. random模块 五. os模块 六. sys模块 七. shutil模块 八. 序列化模块(json&pickle&a ...
- ng-深度学习-课程笔记-9: 机器学习策略1(Week1)
1 为什么要应用机器学习策略( Why is machine learning strategy ) 当你想优化一个问题的时候,通常可以有很多尝试(比如收集更多数据,增加迭代次数,改用adam,改变网 ...
- 分布式ID方案有哪些以及各自的优势
1. 背景 在分布式系统中,经常需要对大量的数据.消息.http请求等进行唯一标识.例如:在分布式系统之间http请求需要唯一标识,调用链路分析的时候需要使用这个唯一标识.这个时候数据自增主键已 ...