通过Canvas + JS 实现简易时钟实战

简介: 最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟。时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码:     这是最终实现的效果: 部分的启发点来自于 http://developer.

最近通过各种渠道学习了下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的原点并不在左上角了   ..... 最后在定时器重新设定解决了这个问题 

 

======================================================== 转载请注明出处。
目录
相关文章
|
13天前
|
移动开发 前端开发 JavaScript
纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜
23 6
|
1月前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
1月前
|
JavaScript 前端开发 算法
JavaScript 中的 if 判断:深入理解、实战应用与进阶技巧
【4月更文挑战第7天】探索 JavaScript 中的 if 判断语句,它是构建逻辑清晰程序的基础。了解其概念、语法、应用示例及编程技巧,包括条件控制、else if 结构、三目运算符。注意条件表达式简洁性,避免 falsy 值陷阱,利用逻辑运算符优化,并减少 if 嵌套。实践这些技巧将提升编程能力和代码质量。
39 0
|
2天前
|
前端开发 JavaScript Java
【JavaScript】JavaScript 防抖与节流:以游戏智慧解锁实战奥秘
【JavaScript】JavaScript 防抖与节流:以游戏智慧解锁实战奥秘
9 3
|
28天前
|
数据可视化 JavaScript 架构师
D3.js实战:数据可视化高级技巧实例应用
本文介绍了D3.js入门,包括创建HTML文件引入库、绘制简单线图、柱状图和饼图。示例展示了数据绑定、交互性和动画效果,如柱状图的悬停效果和线图的数据平滑过渡。此外,还提及力导向图和地图可视化的实现,以及使用Enter, Update, Exit模式进行动态更新。最后提到了复杂图表和高级技巧,如使用组件库、动画、交互性和性能优化。
32 0
|
1天前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
18 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
8天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
14 2
|
8天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
30 3
|
13天前
|
缓存 JavaScript 前端开发
Nuxt.js实战:Vue.js的服务器端渲染框架
Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器
17 0
|
1月前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗