懂你所需,做你所想
当前位置: 仙桃云科 > 新闻资讯 > 技术指导 >

html5怎么画时钟

发表日期:2013-10-22文章编辑:仙桃云科网络科技有限公司

      最近准备把自己的博客装修一下,首先,先为自己设计一个时钟吧,希望博客园能够尽快发放给我使用js的权限!

      自从看见了苹果设计的那款因为侵权而赔钱了时钟,我就决定我的时钟一定是要参考这个来设计了!

                                                            collClock

       不得不说,这是一个非常酷的设计!

准备工作      

首先,定义一个Canvas

<div id="mineClock"  style="position:relative;margin:0px auto">
       <canvas id="canvas" style="background-color:#d7d7d7" width="244" height="300">您的浏览器不支持Canvas</canvas>
</div>

 


开始绘制

绘制此时钟采取的思路是,利用js获取时间,然后将各个时间作为变量设置时针、分针、秒针的旋转角度以及位置,每秒钟刷新一次,然后就能得到一个很酷的模拟时钟!

复制代码
<script>
             var clock = document.getElementById('canvas');
             var ctx = clock.getContext('2d');
             function drawTime() {
                 ctx.clearRect(0, 0, 244, 300);
                 var date = new Date();  //获取当前时间
                 var year = date.getFullYear(); 
                 var month = date.getMonth();
                 var day = date.getDate();
                 var week = date.getDay();
                 var hour = date.getHours();
                 var min = date.getMinutes();
                 var sec = date.getSeconds();

                 hour = hour + min / 60;
                 hour = hour > 12 ? hour - 12 : hour;

                 var width = 244;
                 var height = 280;
                 var dot = {       //时钟中心
                     x: width / 2,
                     y: width / 2,
                     radius: 4
                 }
                 var radius = 115;
                 var maxBorderWidth = 8;
                 var minBorderWidth = 2;


                  //绘制年月日
                 ctx.fillStyle = "#000";  
                 ctx.font = "30px Lucida Sans Unicode";
                 month = eval(month + 1);  //设置月份,月份得到的值为0·11,所以要加一得到实际值
                 var message = year + " 年" + month + " 月" + day; 
                 ctx.fillText(message, 7, height);  
                 
                 //绘制时钟中心点
                 ctx.lineWidth = maxBorderWidth;
                 ctx.beginPath();
                 ctx.fillStyle = "#e2e2e2";
                 ctx.arc(dot.x, dot.y, radius, 0, 2 * Math.PI, true);
                 ctx.fill();
                 ctx.closePath();




                 //绘制时刻度、分刻度
                 
                 for (var i = 0; i < 60; i++) {

                     ctx.save();
                     var pointLong;
                     if (i % 5 == 0) {
                         ctx.lineWidth = maxBorderWidth;
                         pointLong = 25;
                     }
                     else {
                         ctx.lineWidth = minBorderWidth;
                         pointLong = 12;
                     }
                     ctx.strokeStyle = "#000";
                     ctx.translate(dot.x, dot.y);
                     ctx.rotate(i * 6 * Math.PI / 180);
                     ctx.beginPath();
                     ctx.moveTo(0, -radius + maxBorderWidth);
                     ctx.lineTo(0, -radius + maxBorderWidth + pointLong);
                     ctx.closePath();
                     ctx.stroke();
                     ctx.restore();
                 }
                 //绘制时针
                 ctx.save();
                 ctx.lineWidth = maxBorderWidth;
                 ctx.translate(dot.x, dot.y);
                 ctx.rotate(hour * 30 * Math.PI / 180);
                 ctx.beginPath();
                 ctx.moveTo(0, -55);
                 ctx.lineTo(0, 25);
                 ctx.closePath();
                 ctx.stroke();
                 ctx.restore();

                 //绘制分针
                 ctx.save();
                 ctx.lineWidth = maxBorderWidth;
                 ctx.translate(dot.x, dot.y);
                 ctx.rotate(min * 6 * Math.PI / 180);
                 ctx.beginPath();
                 ctx.moveTo(0, -97);
                 ctx.lineTo(0, 25);
                 ctx.closePath();
                 ctx.stroke();
                 ctx.restore();
                //绘制秒针
                 ctx.save();
                 ctx.strokeStyle = "red";
                 ctx.lineWidth = minBorderWidth;
                 ctx.translate(dot.x, dot.y);
                 ctx.rotate(sec * 6 * Math.PI / 180);
                 ctx.beginPath();
                 ctx.moveTo(0, -75);
                 ctx.lineTo(0, 25);
                 ctx.closePath();
                 ctx.stroke();
                 ctx.beginPath();
                 ctx.fillStyle = '#D6231C';
                 ctx.arc(0, -75, 6, 0, 2 * Math.PI, true);  //绘制秒针针尖的小圆点
                 ctx.fill();
                 ctx.closePath();
                 ctx.restore();
                //装饰时钟中心  两个小圆叠加
                 ctx.beginPath();
                 ctx.fillStyle = '#982127';
                 ctx.arc(dot.x, dot.y, dot.radius, 0, 2 * Math.PI, true);
                 ctx.fill();
                 ctx.closePath();

                 ctx.beginPath();
                 ctx.fillStyle = '#D6231C';
                 ctx.arc(dot.x, dot.y, 2, 0, 2 * Math.PI, true);
                 ctx.fill();
                 ctx.closePath();
                //再时钟上添加签名
                 ctx.fillStyle = "#000";
                 ctx.font = "15px Comic Sans MS";
                 ctx.fillText("Chal Mine", dot.x-30, dot.y+50);
             }
             setInterval(drawTime, 1000);  //每秒刷新
    </script>
复制代码

如果你拥有了博客园的js权限,那么你就可以将此时钟添加到博客园的侧边栏了!

 

我不追求自己是何等的完美,但我追求每一天的提高!
如没特殊注明,文章均为仙桃云科网络原创,转载请注明来自>
相关新闻

Java6和Java8在Windows上共存...

最近在做一个Android的项目,一开始安装的是Java8用于项目的开发。但是在项目后期需要用到drozer用于检测项目的安全性,要搭建drozer的测试环境必须要使用Java6,否则会出...

日期:2017-08-30

OpenGL与CUDA互操作方式总结...

一、介绍 CUDA是Nvidia推出的一个通用GPU计算平台,对于提升并行任务的效率非常有帮助。本人主管的项目中采用了OpenGL做图像渲染,但是在数据处理方面比较慢,导致帧率一直...

日期:2017-08-18

nodejs-基础与深入...

01-nodejs介绍 1.什么是nodejs 1. (javascript跑在机器端,服务端)Javascript on the machine 2. (跑在谷歌v8引擎上)A runtime for Google Chrome s V8 Javascript eng...

日期:2017-08-07

InnoDB关键特性之刷新邻接页-异...

Flush neighbor page 1、工作原理 2、参数控制 AIO 1、开启异步IO 一、刷新邻接页功能 1、工作原理 当刷新一个脏页时,innodb存储引擎会检测该页所在区(extent)的所有页,...

日期:2017-07-31

Java8 Stream代码详解+BenchMark...

1、基本介绍 1、创建方式 1、Array的Stream创建 1、直接创建 // main Stream stream = Stream. of ( a , b , c );String [] strArray = new String[] { a , b , c };stream...

日期:2017-07-24

Java 数据类型在实际开发中应用...

在实际编程中,往往存在着这样的数据集,它们的数值在程序中是稳定的,而且数据集中的元素是有限的。在JDK1.5之前,人们用接口来描述这一种数据类型。 1.5以后引入枚举 一...

日期:2017-07-17