circle_clock 简单canvas实现圆弧时钟
渣渣成品图:
http://codepen.io/thewindswor...
最近对于圆形有种特别的感情呢...因为写了个cricle_process_bar就像到了用来做时钟大概会比较有趣吧,所以就着手写了个这样的一个东西.大概代码上错漏还是蛮多的.接下来分享下关于如何开发一个圆形时钟条吧~_~
使用:
Jade
canvas
这次就没有采用div+css的方法来实现圆环了,因为我想要做多层嵌套的圆环,觉得还是使用canvas比较容易吧.然后就去了解了下canvas.
首先是HTML结构
canvas#myCircleClock(width = "300",height = "300")
= <canvas id="myCircleClock" width="300" height="300"></canvas>
当然要是考虑到兼容的话我们可以在canvas标签里面添加提示语句
<canvas id="myCircleClock" width="300" height="300">你的浏览器该升级了</canvas>
接下来为了让我们更直观的看到canvas的区域我们可以为它添加样式.
#myCircleClock{
border:1px dashed #ccc;
}
好的,这样我们就可以看到画布边缘很清晰的显示出来了.
接下来就开始写我们的主要代码了.假如对canvas不清楚的,下面有直通车
https://developer.mozilla.org...
首先,我们需要3个圆环嵌套在一起,分别表示小时hour,分钟minute,秒second
然后它们需要和跟着时间自动填充进度,也就是重绘.
需要时间,那自然就是var now = new Date()获取了时间先了
now.getHours() 获取小时
now.getMinutes() 获取分钟
now.getSeconds() 获取秒数
我们先进行canvas绘画的前提工作吧
var canvas = document.getElementById('myCircleClock');
var ctx = canvas.getContext('2d');
这样我们就获取到渲染上下文ctx啦.然后我们要画圆环,这就要用到
ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)
其中anticlockwise为boolean值,如果为true,逆时针绘制,默认为false,也就是顺时针.可以看出我们做顺时针时钟不需要用到这个属性.
接下来x,y代表圆心的坐标
radius就是半径啦.
startAngle就是圆弧起始点,单位为弧度,也就是Math.PI/360啦
endAngle也就是圆弧的终点啦
使用它之前我们先看一张图
可以清晰看出我们需要的起始点为-Math.PI/2,终点为3*Math.PI/2.
我们需要3个圆环,要绘制很简单,3次arc即可.
var x = 150,y = 150;
var hourHand = {
lineWidth: 20,
x: x,
y: y,
circle_r: 100,
color: "#aaa",
begin: -Math.PI/2,
end: -Math.PI/2,
},/*分针*/
minuteHand = {
lineWidth: 20,
x: x,
y: y,
circle_r: 120,
color: "#bbb",
begin: -Math.PI/2,
end: -Math.PI/2,
},/*秒针*/
secondHand = {
lineWidth: 20,
x: x,
y: y,
circle_r: 140,
color: "#ccc",
begin: -Math.PI/2,
end: -Math.PI/2,
};
drawCircle(config,ctx){
ctx.strokeStyle = config.color;
ctx.lineWidth = config.lineWidth;
ctx.beginPath();
ctx.arc(config.x,config.y,config.circle_r,config.begin,config.end);
ctx.stroke();
}
然后只要
drawCircle(secondHand,ctx);
drawCircle(minuteHand,ctx);
drawCircle(hourHand,ctx);
然后就可以了,我们就会看到...恩,什么都看不到先,因为config.end我们设置了-Math.PI/2
所以我们的圆弧并不会显示出来,但是先不急,我们先理一下drawCircle里面干了啥
drawCircle(config,ctx)
我们传入了画画必须要的渲染上下文ctx,圆弧配置文件config.
然后我们根据配置文件中的属性进行了绘画的设置.
ctx.strokeStyle 用于描述画笔颜色或样式的属性,其实就是画出来的弧是啥样子的
https://developer.mozilla.org...
ctx.lineWidth 用于设置画笔粗细或者说线段厚度的属性,默认为1.0.
https://developer.mozilla.org...
!注意,设置的半径 - lineWidth/2 = 圆心到达弧的距离
ctx.beginPath() 创建新路径时调用该方法,等于准备好画笔的意思,更专业的解释如下(清除上次路径,新建路径)
https://developer.mozilla.org...
ctx.arc() 想好要怎么画啦!(绘制路径)
https://developer.mozilla.org...
ctx.stroke() 按照想好的画出来!(根据设置样式填充路径)
https://developer.mozilla.org...
好的,这就是我们的drawCircle所做的事了,这样我们就可以知道这就是所谓一帧的状态了.
接下来我们要用肉眼见证下了!还记得被我们遗忘在墙角的Date()吗?用到它的时候到了!
一个圆是2*Math.PI
我们把它分成60份,一份就等于Math.PI/30
分成12份的话,一份就等于Math.PI/6
然后传入到我们的设置文件中
secondHand.end += now.getSeconds() * Math.PI/30;
minuteHand.end += now.getMinutes() * Math.PI/30;
hourHand.end += (now.getHours()%12) * Math.PI/6;
再进行绘制
drawCircle(secondHand,ctx);
drawCircle(minuteHand,ctx);
drawCircle(hourHand,ctx);
然后我们就可以看到目前我们的时间是怎么样一个图形啦.
接下来就是要让它动起来了!我们就要用到requestAnimationFrame来进行动画的绘制咯.
关于这个函数,我想张大大的文章和mdn的文档解释已经十分详细啦
CSS3动画那么强,requestAnimationFrame还有毛线用?
MDN window.requestAnimationFrame
首先我们知道它是保持着1秒60帧的速度的,那么每1/60秒,三个圆弧分别会增加
秒:2*Math.PI/(60*60)
分:秒/60
时:分/12
那就愉快的:
var s=Math.PI/1800,m = s/60,h = m/12;
在设置函数step()为一帧发生的事
/*时钟动画函数*/
function HandRotate(secconfig,minconfig,houreconfig,ctx){
var s = Math.PI/1800,m=s/60,h=m/12;
var rotate = requestAnimationFrame(step);
function step(){
secconfig.end+=s;
if(secconfig.end >= 3*Math.PI/2){
secconfig.end = -Math.PI/2;
}
minconfig.end+=m;
if(minconfig.end >= 3*Math.PI/2){
secconfig.end = -Math.PI/2;
}
houreconfig.end+=h;
if(houreconfig.end >= 3*Math.PI/2){
houreconfig.end = -Math.PI/2;
}
ctx.clearRect(0,0,x*2,y*2);
drawCircle(secconfig,ctx);
drawCircle(minconfig,ctx);
drawCircle(houreconfig,ctx);
requestAnimationFrame(step);
}
}
每次绘制后都清除画布来进行下一帧的绘制
ctx.clearRect(x,y,width,height)清除x,y点开始width宽,height高的矩形面积的区域图像.
到这里我们主要的任务也算是完成啦!
后面为圆环添加颜色也好,还是添加文字也好,都是可以自由发挥啦~
不顾我的配色真的是惨不忍睹....
这次算是浅尝辄止的一次canvas应用吧,加入有什么地方可以更改一下的,希望各位码友能指导一下
circle_clock 简单canvas实现圆弧时钟的更多相关文章
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- canvas炫酷时钟
canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...
- canvas自适应圆形时钟绘制
前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...
- canvas绘制圆弧
canvas绘制圆弧 方法 anticlockwise为true表示逆时针,默认为顺时针 角度都传的是弧度(弧度 = (Math.PI/180)*角度) arc(x, y, radius, start ...
- canvas做的时钟,学习下
canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext(" ...
- 使用canvas绘制一个时钟
周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...
- canvas入门之时钟的实现
canvas 入门之作: 三步实现一个时钟: 直接上效果: step 1 : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('ca ...
- html5入门:教你用canvas写一个时钟
今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...
- html5、canvas绘制本地时钟
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- CNN(卷积神经网络)入门
参考博文: 深度学习基础--卷积--1*1的卷积核与全连接的区别:https://blog.csdn.net/wydbyxr/article/details/84061410 如何理解卷积神经网络中的 ...
- MyBatis 使用(XML版本)
一.MyBatis相关概念 对象 / 关系数据库映射(ORM) ORM全称Object/Relation Mapping:表示对象-关系映射的缩写 ORM完成⾯向对象的编程语⾔到关系数据库的映射.当O ...
- Spark中的Wordcount
目录 通过scala语言基于local编写spark的Wordcount 基于yarn去调度WordCount 通过scala语言基于local编写spark的Wordcount import org ...
- 对element-ui的table组件的二次封装
首先,使用过element-ui的table组建的同学都知道,每次使用的时候表头字段都要一个一个的去写,写起来很麻烦,既不美观又浪费时间,基于以上原因,对table组件进行二次封装,使我们在使用的时候 ...
- webpack--性能优化之打包构建速度和代码调试优化
前言 本文来总结写webpack 在性能方面常见的优化方案. 正文 本文分别总结开发环境和生产环境中在打包构建速度和代码调试功能方面的优化方案,如下: 1.开发环境性能优化 (1)优化打包构建速度 a ...
- laravel 公共类json库封装
封装常用的接口响应: 创建 response.php 在app下创建如下文件下(目录及文件名可以自己设置) app/common/response.php,在内部补充如下代码: <?php /* ...
- 小程序WXS 模块
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构 WXS中定义的函数可以在wxml文件中使用,可以用它来当过滤器使用 WXS以.wxs扩展名结尾,文件中 ...
- TypeScript 2.0开启空值的严格检查
摘要:在编程过程成空指针是最常见的bug之一,但是在TypeScript中我们无法使用具体的类型来表示特定的变量不能为空!幸运的是,TypeScript 2.0 解决了这个问题. 本文分享自华为云社区 ...
- jmeter关于入参转码encode问题
我们的工作中,通过抓包经常会发现有很多入参都是被encode过一层,形成了如上图所示的样子: 这些参数我们是可以通过fiddler去转码的:但是如果我们要做jmeter的脚本,不可能每一次都手动去转码 ...
- 硬吃一个P0故障,「在线业务」应该如何调优HBase参数?
1.背景 由于种种原因,最近将核心业务生产使用的HBase迁移到了云上的弹性MapReduce(EMR)集群上,并使用了EMR的HBase组件默认参数配置. 结果在流量高峰期出现了宿主机故障,挂掉了两 ...