canvas时钟--效果图
一、先来简单介绍画时钟需要的canvas知识
1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用。
HTML代码:
<canvas id="canvas" class="canvas" width="400" height="400" border:></canvas>
2.使用id寻找canvas元素,在js代码中使用document.getElementById()等方法获取id。
var canvas = document.getElementById("canvas");
3.通过canvas元素的getContext方法来获取其上下文(Context),即创建Context对象,以获取允许绘画的2D环境。
var ctx = canvas.getContext("2d");
4.先来认识一下canvas的绘制方法。
(1)绘制矩形的两种方法:fillRect 和 strokeRect
前者用于绘制用颜色填充(fill)区域的矩形,后者用于绘制轮廊(stroke)或线条。图形指定颜色用到了两个属性,即fillStyle 和 strokeStyle,前者用于指定要绘制的填充区域的颜色,后者用于指定要绘制的线条颜色。
//绘制填充颜色矩形,默认黑色 ctx.fillStyle="red"; ctx.fillRect(0,0,200,100); //绘制有颜色线条 ctx.strokeStyle="blue"; ctx.strokeRect(0,0,100,50);
(2)绘制圆形
绘制圆形是会用到四种方法:beginPath、arc、closePath和fill或stroke。
//画圆填充红颜色//绘制园用法:ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise); ctx.beginPath(); ctx.fillStyle="red"; ctx.arc(0,0,100,0,2*Math.PI,true); ctx.closePath(); ctx.fill(); //线条蓝色画圆 ctx.beginPath(); ctx.strokeStyle="blue"; ctx.lineWidth=10;//设置线条宽度 ctx.arc(0,0,174,0,Math.PI*2,true); ctx.stroke();
(3)绘制直线
用到两个主要方法:moveTo 和 lineTo 以及stroke。
ctx.moveTo(x,y)——规定线起始点(x,y)。ctx.lineTo(x,y)——规定直线路线的终点。
ctx.moveTo(,); ctx.lineTo(,); ctx.stroke();//该方法用于沿该路径绘制线条
二、画canvas时钟过程
首先,定义画布字体的为圆角,让我们看起来美美的:ctx.lineCap="round";
其次,非常重要,时钟是随着时分秒针的转动而转动的,so——我们需要画布范围内必须设计画布不断清除和刷新:ctx.clearRect(0,0,400,400);
再次,一个画布初始中心点(0,0)是在画布左上角,so——画时钟需要把中心点转移:ctx.translate(200,200);
最后,也是最重要的,每多一个save()保存就必须在下面补上一个还原restore();
1、画分刻线
画线嘛,上面咱们已经讲过画线的步骤,就不多说啦!只需要注意用到rotate()方法将,先用ctx.moveTo(),ctx.lineTo在画布右侧画出第一根分刻线,再定义需要旋转的角度变量——rotateD,经过ctx.rotate(rotateD)方法来for循环以及画布不断清除刷新的状态,即可画出分刻线。
当然这里还需要注意一点:画布需要用到另个方法来包含要执行的内容,分别是save()、restore()。save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许你临时地改变图像状态,然后,通过调用 restore() 来恢复以前的值。我打个比喻:我有一只手,戴上手套去完成一些事情,手套摘下来之后,我的手还是我的手。额,有点。。。呵呵
//画刻度线 for (var i = 0; i ; i++) { ctx.save(); ctx.beginPath(); var rotateD = i*Math.PI*2/60; ctx.rotate(rotateD); ctx.lineWidth = 4; ctx.moveTo(170,0); ctx.lineTo(160,0); ctx.stroke(); ctx.restore(); };
2、画时刻线
同理,画时刻线只需要修改线宽以及旋转角度
3、画时针
在前面new一个data变量var date = new Date;,并且定义一个时针随时间变化旋转角度也变化的变量rotateH。
小时针旋转角度rotateH;
公式:rotateH = 时针旋转角度 +分针旋转角度/12 - 直角 = data.getHours()/12*2*Math.PI + date.getMinutes()/60/12*Math.PI*2 - Math.PI/2;
(为什么会减Math.PI/2呢,因为时针的初始值为(-12,0)、(125,0);针指向正好是在三点中位置,所以需要减掉一个直角才能从十二点开始旋转)。
4、画分针
定义一个分针随时间变化旋转角度也变化的变量rotateM。
公式:rotateM = 分针旋转角度 + 秒针旋转角度/60 -直角 = date.getMinutes()/60*Math.PI*2 + date.getSeconds()/60/60*Math.PI*2 - Math.PI/2;
5、画秒针
定义一个分针随时间变化旋转角度也变化的变量rotateS。
公式:rotateM = 秒针旋转角度 - 减直角 = date.getSeconds()/60*Math.PI*2 - Math.PI/2;
6、时针数字略
三、canvas实现时钟完整代码
js完整代码:
jQuery(function($){ function clock(){ var canvas= document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var date = new Date; ctx.lineCap = "round";//字体变圆角 ctx.clearRect(0,0,400,400);//不断清除画布 不断再执行刷新 ctx.save();//每多一个保存就必须在下面补上一个还原restore() ctx.translate(200, 200);//中心点转移 //画刻度线 for (var i = 0; i < 60; i++) { ctx.save(); ctx.beginPath(); var rotateD = i*Math.PI*2/60; ctx.rotate(rotateD); ctx.lineWidth = 4; ctx.moveTo(170,0); ctx.lineTo(160,0); ctx.stroke(); ctx.restore(); }; for (var i = 0; i < 12; i++) { ctx.save(); ctx.beginPath(); var rotateB = i*Math.PI*2/12; ctx.lineWidth = 6; ctx.rotate(rotateB); ctx.moveTo(170,0); ctx.lineTo(150,0); ctx.stroke(); ctx.restore(); }; //画时针 var rotateH = date.getHours()/12*Math.PI*2 + date.getMinutes()/60/12*Math.PI*2 - Math.PI/2; ctx.save(); ctx.beginPath(); ctx.rotate(rotateH); ctx.lineWidth=12; ctx.moveTo(-12,0); ctx.lineTo(125,0); ctx.stroke(); ctx.restore(); //画分针 var rotateM = date.getMinutes()/60*Math.PI*2 + date.getSeconds()/60/60*Math.PI*2 - Math.PI/2; ctx.save(); ctx.strokeStyle="red"; ctx.beginPath(); ctx.rotate(rotateM); ctx.lineWidth=9; ctx.moveTo(-12,0); ctx.lineTo(135,0); ctx.stroke(); ctx.restore(); //画秒针 var rotateS = date.getSeconds()/60*Math.PI*2 - Math.PI/2; ctx.save(); ctx.strokeStyle="red"; ctx.beginPath(); ctx.rotate(rotateS); ctx.lineWidth=6; ctx.moveTo(-16,0); ctx.lineTo(140,0); ctx.stroke(); //画中心圆点 ctx.fillStyle="red"; ctx.arc(0,0,10,0,2*Math.PI) ctx.closePath(); ctx.fill(); //画秒针圆圈头 ctx.strokeStyle="red"; ctx.moveTo(160,0); ctx.arc(150,0,8,0,2*Math.PI); ctx.stroke(); ctx.restore(); // 画clock的表盘 ctx.beginPath(); ctx.strokeStyle="blue"; ctx.lineWidth=10; ctx.arc(0,0,174,0,Math.PI*2); ctx.stroke(); ctx.restore(); window.requestAnimationFrame(clock); }; window.requestAnimationFrame(clock); });
总结,写得粗糙,仅供参考,期待共同探讨!
canvas画时钟,重拾乐趣!的更多相关文章
-
canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
-
canvas 画时钟 会动呦
//半径 var r = 130; //重置原点 ctx.save(); ctx.translate(400, 500); //使用translate重置原点 function drawClock() ...
-
html5学习(一)--canvas画时钟
利用空余时间学习一下html5. <!doctype html> <html> <head></head> <body> <canva ...
-
用canvas画时钟
效果图在博客首页上. html: <canvas id="canvas" >Your browser does not support canvas</canva ...
-
深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
-
简单酷炫的Canvas数字时钟
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...
-
[JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
-
CSS魔法堂:重拾Border之——更广阔的遐想
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
-
CSS魔法堂:重拾Border之——图片作边框
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
随机推荐
-
java 面向对象编程--第十四章 多线程编程
1. 多任务处理有两种类型:基于进程和基于线程. 2. 进程是指一种“自包容”的运行程序,由操作系统直接管理,直接运行,有自己的地址空间,每个进程一开启都会消耗内存. 3. 线程是进程内部单一的 ...
-
zookeeper作为soa服务器集群的协调调度服务器
zookeeper作为soa服务器集群的协调调度服务器,当然自身也支持集群. ZooKeeper搭建系列集 ZooKeeper系列之一:ZooKeeper简介 ZooKeeper系列之二:ZooKee ...
-
爬虫技术浅析 | WooYun知识库
爬虫技术浅析 | WooYun知识库 爬虫技术浅析 好房通ERP | 房产中介软件最高水准领导者 undefined
-
SilkTest高级进阶系列10 – bitmap工具bitview
SilkTest 提供了一个bitmap的工具,它可以帮助我们捕捉,比较bitmap文件.该bitmap工具的位置是~/SilkTest/bitview.exe 运行该工具后,你会发现它提供了捕捉控件 ...
-
CentOS更新源
1.首先备份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS ...
-
[AH2017/HNOI2017]礼物(FFT)
题目描述 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一 个送给她.每个手环上各有 n 个装饰物,并且每个装饰物都有一定的亮度.但是在她生日的前一 ...
-
搭建企业级NFS网络文件共享服务
NFS服务简介 NFS是Network File System(网络文件系统).主要功能是通过网络让不同的服务器之间可以共享文件或者目录.NFS客户端一般是应用服务器(比如web,负载均衡等),可以 ...
-
iOS开发值得收藏的博客
http://kobedai.me/ objc.io PS:经典,内容深而广objc中国NSHipster PS:很多小细节NSHipster 中文版唐巧的技术博客 PS:LZ是唐巧的脑残粉…OneV ...
-
【spark系列3】spark开发简单指南
分布式数据集创建之textFile 文本文件的RDDs能够通过SparkContext的textFile方法创建,该方法接受文件的URI地址(或者机器上的文件本地路径,或者一个hdfs ...
-
sipp模拟电信运营商VoIP终端测试(SIP协议调试)
三大运营商都有SIP服务器,用来支持语音对讲,多媒体调度等功能,他们的平台可能不是标准的SIP协议会话. 为了应对没完没了的对接各个厂商的平台,这里再整理了一套协议脚本,毕竟全都是没有意义的无用功,标 ...