最近通过各种渠道学习了下html5中的canvas元素，为了练练手就随手写了一个简易的时钟。时钟本身不复杂，没有使用图片进行美化，下面就与大家分享一下具体的代码：

这是最终实现的效果：

部分的启发点来自于 http://developer.51cto.com/art/201503/467645.htm

html代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Clock</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .canvas{
            margin-left: 20px;
            margin-top: 20px;
           
            
        }
        </style>
    </head>
    <body onload="main()">
     <canvas class = "canvas" id="canvasId" width = '400' height = '400'></canvas>

　　</body>

js代码：

var Clockbox = function(obj,width,height){
            this.o = {
                'dates':[],                        //时间
                'obj':obj,                            //canvas对象
                'width':width,                        //canvas宽度
                'height':height,                    //canvas高度
                'obj2d':obj.getContext('2d'),        //2d对象
                'wcolor':'#000000',                    //线条颜色
                'scalewidth':30,                     //刻度长度
                'msradius':(1/30)*Math.PI,            //分秒的弧度
                'hsradius':(1/6)*Math.PI,            //时的弧度
                 'hourHandLength' : (width/5),         /*时针长度*/
                'minHandLength':(width/6*1.8),         /*分针长度*/
                'secHandLength':(width/20*8),         /*秒针长度*/
                'fontsize':30                       //数字大小
            }
            var _this = this;
            this.infn();
            setInterval(function(){
              _this.o.obj2d.translate(-_this.o.width/2,-_this.o.height/2);
                _this.o.obj2d.clearRect(0,0,_this.o.width,_this.o.height);
                _this.infn();
            },1000)
        }
        Clockbox.prototype = {
            infn:function(){
                //表盘
                var obj2d = this.o.obj2d;
               
                var dates = new Date();
                this.o.dates = [dates.getHours(),dates.getMinutes(),dates.getSeconds()];
            
                //绘制
                obj2d.beginPath();
                obj2d.arc(this.o.width/2,this.o.height/2,this.o.width/2,0,2*Math.PI,false);
                obj2d.strokeStyle = this.o.wcolor;
                obj2d.stroke();
                
                //刻度
                this.scalefn(obj2d);
                //时针
                this.hour(obj2d);
                //分针
                this.minute(obj2d);
                //秒针
                this.sec(obj2d);
            },
            //绘制刻度和指针
            scalefn:function(obj2d){
                obj2d.translate(this.o.width/2,this.o.height/2);
                for(var i = 0;i<12;i++){
                    obj2d.moveTo(this.o.width/2-this.o.scalewidth, 0);
                       obj2d.lineTo(this.o.width/2, 0);  
                    obj2d.rotate(this.o.hsradius);
                }
                obj2d.font = "bold "+this.o.fontsize+"px impack";
                obj2d.textAlign = "center";
                obj2d.fillStyle = "#ff9000";
                obj2d.fillText("12",0,-((this.o.width/2)-(this.o.scalewidth*2+10)));
                obj2d.fillText("3",((this.o.width/2)-(this.o.scalewidth*2)),this.o.fontsize/3);
                obj2d.fillText("6",0,((this.o.width/2)-(this.o.scalewidth*2)));
                obj2d.fillText("9",-((this.o.width/2)-(this.o.scalewidth*2)),this.o.fontsize/3);
                obj2d.stroke();
                obj2d.restore();
            },
            //时针
            hour:function(obj2d){
                  obj2d.save();
                  obj2d.rotate(this.o.hsradius*Number(this.o.dates[0]));
                
                obj2d.moveTo(0,0);
                obj2d.lineTo(0,-this.o.hourHandLength);
                
                obj2d.stroke();
                obj2d.restore();
            },
            //分针
            minute:function(obj2d){
                obj2d.save();
                obj2d.rotate(this.o.msradius*Number(this.o.dates[1]));
                 obj2d.beginPath();
                obj2d.moveTo(0,0);
                obj2d.lineTo(0,-this.o.minHandLength);
                
                obj2d.stroke();
                obj2d.restore();
            },
            //秒针
            sec:function(obj2d){
                obj2d.save();
                obj2d.rotate(this.o.msradius*Number(this.o.dates[2]));
                obj2d.beginPath();
                obj2d.moveTo(0,0);
                obj2d.lineTo(0,-this.o.secHandLength);
                
                obj2d.stroke();
                obj2d.restore();
            }
        }
       function main(){

　　　　 var can = document.getElementById('canvasId');
            var Clock =    new Clockbox(can,400,400);
        
      }

js代码详解：

　　　　　　1.首先这里使用了面向对象的形式

　　　　　　2.这里为了方便更改大小，传入了3个参数 obj，width，height，分别表示canvas元素  以及它的宽度和高度，表盘的半径是宽的二分之一

　　　　　　3. 因为1小时有60分钟  所以每一个分钟单元格应该有的弧度就是(1/（60/2）)*Math.PI，小时同理

　　　　　　4.   依据现在的时间 用 .rotate（）方法对指针做角度控制 12点的时针的弧度就是 一个小时的弧度*12

　　　　　　5.最后每秒不断的清除画布  重构 就形成了一个动态的时钟

遇到的问题：

　　 translate（）  在画完之后 canvas的原点并不在左上角了   ..... 最后在定时器重新设定解决了这个问题

通过Canvas + JS 实现简易时钟实战的更多相关文章

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

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

  2. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  3. canvas.js | CLiPS

    canvas.js | CLiPS canvas.js The canvas.js module is a simple and robust JavaScript API for the HTML5 ...

  4. [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 （tab）

    前言 [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab) 在上一篇中,中间的tab 区块无法自动伸展的原因一句话说就是: 使用contentEL的方式,相关HTML元素不会参与组 ...

  5. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

  6. 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

  7. js动态数字时钟

    js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...

  8. [转] 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

  9. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

随机推荐

  1. 输出 n=6 的三角数字阵(JAVA基础回顾)

    package itcast.feng; import java.util.Scanner; //需求:输出 n=6 的三角数字阵 //1 //2 3 //4 5 6 //7 8 9 10 //11 ...

  2. 剑指Offer面试题：5.重建二叉树

    一.题目:重建二叉树 题目:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序 ...

  3. TODO：Linux安装PHP MongoDB驱动

    TODO:Linux安装PHP MongoDB驱动 PHP利于学习,使用广泛,主要适用于Web开发领域. MongoDB的主要目标是在键/值存储方式(提供了高性能和高度伸缩性)以及传统的RDBMS系统 ...

  4. 短线技术MACD指标图解

    1.通常DIF上穿0轴线的当天是中长线难得第一次买入的好时机,会引起场外资金的关注,如果上穿后MACD没有调头的迹象,则股价回调到5日均线附近为买入的好时机,必要时参考其他指标追涨.在0轴线以上形成2 ...

  5. 修改Credentials 密码

    今天,Leader 吩咐要修改管理账户的密码,我负责的Part是修改package和 Replication的Job的密码.仔细想了下,由于我们使用的Windows验证方式,而Job在执行时,是使用P ...

  6. 小谈MVC 模式

    MVC (Modal View Controler) 本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使 ...

  7. Neutron 功能概述 - 每天5分钟玩转 OpenStack（65）

    从今天开始,我们将学习 OpenStack 的 Networking Service,Neutron.Neutron 的难度会比前面所有模块都大一些,内容也多一些.为了帮助大家更好的掌握 Neutor ...

  8. 写在最前面 - 每天5分钟玩转 OpenStack（1）

    <每天5分钟玩转 OpenStack>是一个 OpenStack 教程,这是第 1 篇. 这个教程有下面两个特点: 系统讲解 OpenStack 从架构到各个组件:从整体到细节逐一讨论 重 ...

  9. 为SubSonic3.0的查询（SubSonic.Query.Select和存储过程）添加更多的执行功能

    在使用SubSonic3.0的查询功能时,会发现想通过执行返回我们想要的数据,切没有相关的功能,比如说:SubSonic.Query.Select,在使用查询时没有返回DataSet或DataTabl ...

  10. iOS开发之画图板(贝塞尔曲线)

    贝塞尔曲线,听着挺牛气一词,不过下面我们在做画图板的时候就用到贝塞尔绘直线,没用到绘制曲线的功能.如果会点PS的小伙伴会对贝塞尔曲线有更直观的理解.这篇博文的重点不在于如何用使用贝塞尔曲线,而是利用贝 ...