最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果。

首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小。

因为一个圆是360度,所以数字之间就是360/12=30度,所以我在圆上画出数字的代码是这样的:

drawNumber:function(){
this.context.save();
for(var i = 1;i < 13; i++){
var angle = i*30;
angle = angle*Math.PI/180;
var x = Math.round(Math.sin(angle)*(this.r-20));
var y = Math.round(-Math.cos(angle)*(this.r-20));
this.context.fillStyle="#8DA6B8";
this.context.font = "bold 20px Calibri";
this.context.textAlign = "center";
this.context.textBaseline = "middle";
this.context.fillText(i,x+this.widths/2,y+this.heights/2);
}
this.context.restore();
},

因为Math.cos()和Math.sin()接受的都是弧度制,所以需要把30度转换成对应的弧度喔。

其次,我们来看看怎么画时钟上的时针、分针以及秒针。

因为时针、分针、秒针要随着时间的改变而改变,所以我们需要获取当前时间以及context.translate(this.widths/2,this.heights/2);context.rotate(rotate);来对时针、分针、秒针的旋转。

其中时针的旋转弧度是:hrotate = (h*30+(m/60)*30+(s/3600)*30)*Math.PI/180; (ps:每过一个小时,时针就需要旋转30度)

分针的旋转弧度是:mrotate = (m*6+(s/60)*6)*Math.PI/180;(ps:每过一分钟,分针就需要旋转6度)

秒针的旋转弧度是:srotate = (s*6)*Math.PI/180;(ps:每过一秒,秒针就需要旋转6度)

            var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var hrotate = (h*30+(m/60)*30+(s/3600)*30)*Math.PI/180;
var mrotate = (m*6+(s/60)*6)*Math.PI/180;
var srotate = (s*6)*Math.PI/180;
// console.log(h + ':' + m + ':' + s); //时针
this.context.save();
this.context.translate(this.widths/2,this.heights/2);
this.context.save();
this.context.rotate(hrotate);
this.context.beginPath();
this.context.lineCap="round";
this.context.moveTo(0,0);
this.context.lineTo(0,-40);
this.context.strokeStyle="#1AA9D8";
this.context.lineWidth=6;
this.context.stroke();
this.context.closePath();
this.context.restore();
//分针
this.context.save();
this.context.rotate(mrotate);
this.context.beginPath();
this.context.lineCap="round";
this.context.moveTo(0,0);
this.context.lineTo(0,-50);
this.context.strokeStyle="#23BCEF";
this.context.lineWidth=4;
this.context.stroke();
this.context.closePath();
this.context.restore();
//秒针
this.context.save();
this.context.rotate(srotate);
this.context.beginPath();
this.context.lineCap="round";
this.context.moveTo(0,0);
this.context.lineTo(0,-65);
this.context.strokeStyle="#23BCEF";
this.context.lineWidth=1;
this.context.stroke();
this.context.closePath();
this.context.restore();
this.context.restore();

最后,使用setInterval()方法来实现画布的周期性更新,在每次绘画之前需要先将画布清空哟,要不然,嘿嘿,你懂的。

这样我们的时钟就完成了,canvas是不是也很赞呀!好了,canvas时钟就讲到这啦,有什么讲的不对的地方希望各位大神指正,小女子在此谢过!

canvas实现的时钟效果的更多相关文章

  1. canvas实现简易时钟效果

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

  2. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  3. transform实现的时钟效果

    又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...

  4. 利用js+canvas实现的时钟效果图

    canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...

  5. canvas自适应圆形时钟绘制

    前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...

  6. canvas炫酷时钟

    canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...

  7. 圆盘时钟效果 原生JS

    圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...

  8. Flash AS实现时钟效果(全脚本实现)

    最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...

  9. 酷!使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

随机推荐

  1. Mixed Content: The page at 'https://a.t.com/login' was loaded over HTTPS, but requested an insecure stylesheet 非全站https

    Mixed Content: The page at 'https://a.t.com/login' was loaded over HTTPS, but requested an insecure ...

  2. tcp/ip三次握手及四次挥手

    三次握手Three-way Handshake 一个虚拟连接的建立是通过三次握手来实现的 1. (B) –> [SYN] –> (A) 假如服务器A和客户机B通讯. 当A要和B通信时,B首 ...

  3. 在一台server上部署多个Tomcat

    版权声明: https://blog.csdn.net/u011518709/article/details/27181665 在一台server上配置多个Tomcat的方法: 这几天因为在研究OGS ...

  4. go-006-运算符

    运算符用于在程序运行时执行数学或逻辑运算. Go 语言内置的运算符有: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 算术运算符 下表列出了所有Go语言的算术运算符.假定 A ...

  5. java static成员变量方法和非static成员变量方法的区别

    这里的普通方法和成员变量是指,非静态方法和非静态成员变量首先static是静态的意思,是修饰符,可以被用来修饰变量或者方法. static成员变量有全局变量的作用       非static成员变量则 ...

  6. cocos代码研究(9)ProgressTimer类学习笔记

    理论部分 ProgressTimer是Node的子类. 该类根据百分比来渲染显示内部的Sprite对象. 变化方向包括径向,水平或者垂直方向. 代码部分 Type getType () const获取 ...

  7. 使用ffmpeg进行网络直播

    一.采集:使用python调用摄像头采集,原设想是使用树莓派摄像头采集,但是经费紧张买不起,先用摄像头凑合下,反正很简单.                   原理就是先录一小段视频,然后循环播放,用 ...

  8. iOS error: -34018

    一般报这个错误是由于操作keychain 报的错. 遇到该情况的情况: 1.是否打开权限 2.苹果自身的bug,传送门:https://stackoverflow.com/questions/2974 ...

  9. 探索C++虚函数在g++中的实现

    本文是我在追查一个诡异core问题的过程中收获的一点心得,把公司项目相关的背景和特定条件去掉后,仅取其中通用的C++虚函数实现部分知识记录于此. 在开始之前,原谅我先借用一张图黑一下C++: “无敌” ...

  10. CCNA学习指南 -开放最短路径优先OSPF(单区域)

    在上个世纪九十年代撰写的<TCP/IP协议详解 卷一:协议>的动态选路中,内容大部分还是介绍 RIP路由选择信息协议,在互联网络如此发达的今天,RIP因为它的局限性逐步被OSPF取代. 在 ...