时钟绘制的非常简易，但该有的都有了。

效果图如下，

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>clock</title>

     <style>

         body{

             background: #ddd;

         }

         #canvas {

             margin: 10px;

             padding: 10px;

             background: #fff;

             border: thin inset #aaa;

         }

     </style>

 </head>

 <body>

     <canvas id="canvas" width="300" height="300"></canvas>

     <script src="Example2-1.js"></script>

 </body>

 </html>

HTML代码

 var canvas = document.getElementById("canvas");

 var context = canvas.getContext("2d");

 var FONT_HEIGHT = 15;

 var MARGIN = 35;

 var HAND_TRUNCATION = canvas.width/25;

 var HOUR_HAND_TRUNCATION = canvas.width/10;

 var NUMERAL_SPACING = 20;

 var RADIUS = canvas.width/2 - MARGIN;

 var HAND_RADIUS = RADIUS + NUMERAL_SPACING;

 //绘制圆形

 function drawCircle(){

     context.beginPath();

     context.arc(canvas.width/2,canvas.height/2,RADIUS,0,Math.PI*2,true);

     //(圆心x坐标，圆心y坐标，半径，起点角，终点角，绘制方向(顺/逆))

     context.stroke();

 }

 //绘制时刻数字

 function drawNumberals(){

     var numerals = [1,2,3,4,5,6,7,8,9,10,11,12],angle = 0,numeralWidth = 0;

     numerals.forEach(function(numeral){

         angle = Math.PI/6 * (numeral-3);

         numeralWidth = context.measureText(numeral).width;

         context.fillText(numeral,

             canvas.width/2 + Math.cos(angle) * (HAND_RADIUS) - numeralWidth/2,

         canvas.height/2 + Math.sin(angle) * (HAND_RADIUS) + FONT_HEIGHT/3);

     });

 }

 //画圆心

 function drawCenter(){

     context.beginPath();

     context.arc(canvas.width/2,canvas.height/2,5,0,Math.PI*2,true);

     context.fill();

 }

 //画指针

 function drawHand(loc,isHour){

     var angle = (Math.PI/2) * (loc/15)- Math.PI/2,

         handRadius = isHour ? RADIUS -HAND_TRUNCATION -HOUR_HAND_TRUNCATION : RADIUS -HAND_TRUNCATION;

     context.moveTo(canvas.width/2,canvas.height/2);

     context.lineTo(canvas.width/2 + Math.cos(angle) * handRadius,canvas.height/2 + Math.sin(angle) * handRadius);

     context.stroke();

 }

 function drawHands(){

     var date = new Date,

         hour = date.getHours();

     hour = hour > 12 ? hour - 12 : hour;

     drawHand(hour*5 + (date.getMinutes()/60)*5,true);

     drawHand(date.getMinutes(),false);

     drawHand(date.getSeconds(),false);

 }

 function drawClock(){

     context.clearRect(0,0,canvas.width,canvas.height); //清空画布

     drawCircle();

     drawCenter();

     drawHands();

     drawNumberals()

 }

 //初始化

 context.font = FONT_HEIGHT + 'px Arial';

 loop = setInterval(drawClock,1000); //1s刷新一次

JS代码

canvas绘制简易时钟的更多相关文章

  1. canvas绘制表盘时钟

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. canvas绘制简易动画

    在canvas画布中制作动画相对来说很简单,实际上就是不断变化的坐标.擦除.重绘的过程 1.使用setInterval方法设置动画的间隔时间. setInterval(code,millisec) s ...

  3. 使用canvas绘制一个时钟

    周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...

  4. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  5. 应用canvas绘制动态时钟--每秒自动动态更新时间

    使用canvas绘制时钟 下文是部分代码,完整代码参照:https://github.com/lemoncool/canvas-clock,可直接下载. 首先看一下效果图:每隔一秒会动态更新时间 一. ...

  6. html5、canvas绘制本地时钟

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. canvas实现简易时钟效果

    代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  8. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  9. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

随机推荐

  1. js 与 jq 的节点添加删除实例

    JavaScript实例:XML DOM节点的添加 <!DOCTYPE html> <html> <head> <meta charset="utf ...

  2. ****LINUX命令（含GIT命令）个人总结

    参考文章: 每日一个linux命令 http://www.cnblogs.com/peida/tag/%E6%AF%8F%E6%97%A5%E4%B8%80linux%E5%91%BD%E4%BB%A ...

  3. Linux学习内容

    Linux学习要点(转载自红联) 一.学习Linux的基本要求1． 掌握至少50个以上的常用命令. 2． 熟悉Gnome/KDE等X-windows桌面环境操作 . 3． 掌握.tgz..rpm等软件 ...

  4. CentOS Linux服务器安全设置

    转自:http://www.osyunwei.com/archives/754.html 引言: 我们必须明白:最小的权限+最少的服务=最大的安全 所以,无论是配置任何服务器,我们都必须把不用的服务关 ...

  5. #英文#品读中国城市个性——最好的和最坏的&当东方遇到西方

    冒险家的乐园 a playground of risk 实现发财梦 realize one's dreams of wealth 道德沦丧,堕落 moral deprivation 租界 foreig ...

  6. Kafka vs RocketMQ—— Topic数量对单机性能的影响-转自阿里中间件

    引言 上一期我们对比了三类消息产品(Kafka.RabbitMQ.RocketMQ)单纯发送小消息的性能,受到了程序猿们的广泛关注,其中大家对这种单纯的发送场景感到并不过瘾,因为没有任何一个网站的业务 ...

  7. 从外部浏览开启app

    先描述一下需求:从浏览器中点击某个按钮,如果手机上装有相应的app,则直接开启app,并且到相对的页面.如果没有装该app,则会到相应的下载app的界面. 我这里主要用的是第三方的东西,就是魔窗中的m ...

  8. JS(去掉前后空格或去掉所有空格)的用法

    1.  去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 说明 ...

  9. IIS 图片加载不出来

    如何为IIS增加svg和woff格式文件的支持 在我们新版的TopFlow中,使用了最新的bootstrap框架,此框架使用了字体文件来显示矢量的图标,为了能在IIS上正常显示图标,可以通过增加iis ...

  10. Centos:Another app is currently holding the yum lock; waiting for it to exit...

    Another app is currently holding the yum lock; waiting for it to exit... 另一个应用程序是:PackageKit 内存: 27 ...