HTML5应用之时钟
利用HTML5的Canvas API可以完成我们以前意想不到的动画效果,以前我们想在网页上放置一个时钟,需要先用flash工具制作一个钟表,并写上复杂的JavaScript代码,然后载入到页面中。而HTML5的到来,我们可以直接在页面中使用canvas标签并配合javascript就可以完成一个漂亮的时钟。
今天,我们一起来使用HTML5制作一个指针会走动的时钟。
HTML
我们只需要在html中放置一个canvas标签:#clock,宽度和高度都是400px。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>HTML5应用之时钟</title>
- </head>
- <body>
- <canvas id="clock" width="400" height="400"></canvas>
- </body>
- </html>
我们先来获取当前时间:包括时分秒,确保在打开页面时能定位指针位置,并且定义好圆点坐标和秒钟角度变量。
- var time = new Date();
- var h = time.getHours(); //时
- var m = time.getMinutes(); //分
- var s = time.getSeconds(); //秒
- h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //时针 初始位置
- var x=200,y=200,sAngle=0; //x y 原点 秒针角度变量
接下来,我们利用canvas来绘制时钟,我们写一个函数draw(),绘制刻度,执行该函数一次,则秒针顺时针走动1/60个圆弧度。
首先,获取canvas绘图对象,绘制时钟刻度。我们将时钟(圆)划分为12个刻度,即每个刻度代表一个钟头,当然,你也可以划分为60个刻度,这样每个刻度就代表1分钟。
- function draw(){
- var c=document.getElementById("clock");
- var ctx=c.getContext("2d"); //获取绘图对象
- ctx.clearRect(0,0,c.width,c.height); //清除上次绘制的图形
- s++;//秒针
- ctx.fillStyle = '#fff' //填充白色背景色
- ctx.fillRect(0,0,c.width,c.height); //设置画布区域
- ctx.save(); //保存当前绘图状态
- // 时间刻度
- for(var i=0;i<12;i++){ //划分12刻度
- var angle=(Math.PI*2)/12; //获得每个刻度对应的弧度
- ctx.beginPath();//开始绘制
- ctx.font="12px Arial"; //设置字体
- if(i==0||i==3||i==6||i==9){ //当指向0(12点)、3点、6点、9点时
- ctx.fillStyle="red"; //刻度为红色
- radius=4; //刻度半径长4px
- }else{
- ctx.fillStyle="blue"; //刻度为蓝色
- radius=3; //刻度半径长为3px
- }
- ctx.arc(x,y-100,radius,0,Math.PI*2,true); //画圆作为刻度
- ctx.fill(); //填充路径
- transform(ctx,x,y,angle,true); //刻度分布
- }
- ctx.restore(); //恢复上次保存的绘图状态
- ...
- }
按照上面的代码可以绘制一个带刻度的圆盘作为时钟的表盘。接下来我们继续在函数draw()里写时分秒指针的转动。
- function draw(){
- ...
- sAngle=(Math.PI*2)/60*s; //秒度
- //时针转动
- ctx.save();
- ctx.strokeStyle="red";
- ctx.lineWidth=3;
- transform(ctx,x,y,(Math.PI*2)/60*h);
- sj(ctx,x,y,y-40);
- ctx.restore();
- //分针转动
- ctx.save();
- ctx.strokeStyle="blue";
- ctx.lineWidth=2;
- transform(ctx,x,y,(Math.PI*2)/60*m);
- sj(ctx,x,y,y-68);
- ctx.restore();
- //秒针转动
- ctx.save();
- ctx.strokeStyle="#000";
- transform(ctx,x,y,sAngle);
- sj(ctx,x,y,y-80);
- ctx.restore();
- //数据整理
- if(s%60==0){
- sAngle=0,s=0,m++;
- if(m%12==0){ //每十二分 时针旋转一次
- if(m!=0)h++;
- if(m%60==0)m=0;
- }
- if(h%60==0)h=0;
- }
- }
每调用一次draw(),我们对时分秒针设置不同的填充颜色和指针粗细,绘制指针,根据弧度转动指针位置,其中我们调用了自定义函数trans()和pointer()。
函数pointer()用来绘制指针。其中ctx表示canvas对象,x,y是圆点坐标,z是指针头的位置。
- function pointer(ctx,x,y,z){
- ctx.beginPath();
- ctx.moveTo(x,y);
- ctx.lineTo(x,z);
- ctx.stroke();
- ctx.fill();
- }
函数transform()用来旋转指针。其中ctx表示canvas对象,x,y是圆点坐标,angle是转动角度。
- function trans(ctx,x,y,angle){
- ctx.transform(Math.cos(angle), Math.sin(angle),
- -Math.sin(angle), Math.cos(angle),
- x*(1-Math.cos(angle)) + x*Math.sin(angle),
- y*(1-Math.cos(angle)) - y*Math.sin(angle))
- }
最后,我们设置每隔1秒钟(即1000毫秒)执行一次draw()。
- setInterval("draw()",1000);
HTML5应用之时钟的更多相关文章
- html5制作一个时钟
试着用html5写一个时钟 记得开始这个随笔是几天前,一直保存在草稿里面,一直感觉有个东西搁在在那里,所以今天熬夜也要写完这篇博客!!!哈哈...不多说来上代码和思路. --------------- ...
- [ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...
- 一款纯html5实现的时钟
今天给大家分享一款非常漂亮的纯html5实现的时钟.整个界面都由html5绘制而成.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
- html5 canvas绘画时钟
本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
- HTML5 Canvas 绘制时钟
网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...
- html5 Canvas绘制时钟以及绘制运动的圆
1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...
- HTML5 canvas 指针时钟
<!doctype html> <html> <head></head> <body> <canvas id="> 您 ...
随机推荐
- Python中作Q-Q图(quantile-quantile Plot)
Q-Q图主要可以用来回答这些问题: 两组数据是否来自同一分布 PS:当然也可以用KS检验,利用python中scipy.stats.ks_2samp函数可以获得差值KS statistic和P值从而实 ...
- ASPxGridView中DetailRow的使用
ASPxGridView是一个方便的数据显示控件,可是自动的绑定我们所需要的数据,但是有时,当数据属性过多时,我们并不一定要把所有的信息提供给所有的人,当有人需要这些数据时可以自动的进行查看,这时就可 ...
- WCF和WebService中获取当前请求报文的方法
WCF中: 1. 在hosting WCF的web.config中加入: <system.serviceModel> <serviceHostingEnvironment aspNe ...
- [Flex] ButtonBar系列——简单布局
<?xml version="1.0" encoding="utf-8"?> <!--通过layout属性,设置ButtonBar布局--&g ...
- sql执行返回值存储
List<Map> list = SqlRunner.queryMapList(sql); if(list != null && !list.isEmpty()){ Has ...
- 常用命令之ps
ps : process status ps 为我们提供了进程的一次性的查看,它所提供的查看结果并不动态连续的:如果想对进程时间监控,应该用 top 工具. kill 命令用于杀死进程. linux上 ...
- JavaWeb四个域
一.ServletContext对象(Context域)1.服务器启动的时候,会为每一个webapp创建一个对应的ServletContext对象,他代表该webapp,当服务器停止或将webapp从 ...
- 页面设计--Grid列表
Grid列表控件 功能:主要实现Html Table功能,支持多表头.固定表头.固定列.输出.组合查询.编辑功能 优点:可以快速的通过数据集合生成多表头.多样式的列表.通过简单的拖拉实现多层表头. G ...
- maven多工程构建与打包
目标:webapp_aggregator为聚合和父pom工程,不包含代码和资源,webapp为主web工程,webapp_module1为子web工程,webapp_common为基础子工程,两个we ...
- 【Unity Shaders】学习笔记——SurfaceShader(七)法线贴图
[Unity Shaders]学习笔记——SurfaceShader(七)法线贴图 转载请注明出处:http://www.cnblogs.com/-867259206/p/5627565.html 写 ...