Canvas实现弧线时钟
最近试着用canvas元素的2d绘图函数做了一个弧线形的时钟。
我也没啥好说的,直接上代码:
- <div id="myclock"></div>
- <script>
- createClock("#myclock", 0, 0.5);
- function createClock(selector, n, p_r) {
- var weeks = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
- var p_b = 0.09;
- var p_d = 0.4;
- var n_c = "rgba(255,150,0,1)";
- var canv = document.createElement("canvas");
- var c = canv.getContext("2d");
- var p = document.querySelectorAll(selector)[n];
- p.appendChild(canv);
- canv.style.display = "block";
- var r, b, l;
- function resizing() {
- r = p_r * p.clientWidth;
- canv.width = canv.height = 2 * r;
- b = p_b * r;
- l = r - (3 + 2 * p_d) * b;
- c.lineWidth = b;
- c.lineCap = "round";
- c.strokeStyle = n_c;
- }
- resizing();
- window.addEventListener("resize", resizing);
- function fraps() {
- var t = new Date();
- var ds = t.getFullYear() + '/' + ct(t.getMonth() + 1) + '/' + ct(t.getDate());
- var ws = weeks[t.getDay()];
- var hs = ct(t.getHours()) + ':' + ct(t.getMinutes());
- var ss = ct(t.getSeconds());
- var sn = t.getSeconds() + 0.001 * t.getMilliseconds();
- var mn = t.getMinutes() + sn / 60;
- var hn = t.getHours() + mn / 60;
- if (hn > 12) hn -= 12;
- c.clearRect(0, 0, 2 * r, 2 * r);
- c.fillStyle = 'black';
- c.font = 0.65 * l + "px Arial bold";
- c.fillText(hs, r - 0.845 * l, r + 0.247 * l);
- c.fillStyle = 'red';
- c.font = 0.27 * l + "px Arial bold";
- c.fillText(ds, r - 0.75 * l, r - 0.3 * l);
- c.font = 0.35 * l + "px Arial bold";
- c.fillText(ws, r - 0.7 * l, r + 0.6 * l);
- c.fillStyle = 'aqua';
- c.font = 0.57 * l + "px Arial bold";
- c.fillText(ss, r, r + 1.3 * 0.57 * l);
- c.beginPath();
- c.arc(r, r, r - 0.5 * b, -0.5 * Math.PI, (sn / 30 - 0.5) * Math.PI);
- c.stroke();
- c.beginPath();
- c.arc(r, r, r - (1.5 + p_d) * b, -0.5 * Math.PI, (mn / 30 - 0.5) * Math.PI);
- c.stroke();
- c.beginPath();
- c.arc(r, r, r - (2.5 + 2 * p_d) * b, -0.5 * Math.PI, (hn / 6 - 0.5) * Math.PI);
- c.stroke();
- }
- function ct(i) {
- if (i < 10) i = "0" + i;
- return i;
- }
- setInterval(fraps, 40);
- }
- </script>
Canvas实现弧线时钟的更多相关文章
- canvas做的时钟,学习下
canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext(" ...
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- canvas自适应圆形时钟绘制
前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...
- canvas炫酷时钟
canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...
- 使用canvas绘制一个时钟
周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...
- html5、canvas绘制本地时钟
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- canvas绘制简易时钟
时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...
- 利用js+canvas实现的时钟效果图
canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...
- 用canvas绘制一个时钟
实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...
随机推荐
- 还在使用Future轮询获取结果吗?CompletionService快来了解下吧。
背景 二胖上次写完参数校验(<二胖写参数校验的坎坷之路>)之后,领导一直不给他安排其他开发任务,就一直让他看看代码熟悉业务.二胖每天上班除了偶尔跟坐在隔壁的前端小姐姐聊聊天,就是看看这些 ...
- 手写简易版RPC框架基于Socket
什么是RPC框架? RPC就是远程调用过程,实现各个服务间的通信,像调用本地服务一样. RPC有什么优点? - 提高服务的拓展性,解耦.- 开发人员可以针对模块开发,互不影响.- 提升系统的可维护性及 ...
- Linux USB子系统(一)—— USB设备基础概念
一.基础概念 在终端用户看来,USB设备为主机提供了多种多样的附加功能,如文件传输,声音播放等,但对USB主机来说,它与所有USB设备的接口都是一致的.一个USB设备由3个功能模块组成:USB总线接口 ...
- 每日一个linux命令6 -- rmdir
rmdir doc 如果doc为空目录则删除,否则无法删除. rmdir -p test2/test3 递归删除空目录,首先判断test3,如果test3为空,则删除test3,此时判断test2,如 ...
- vue-cli3 创建项目路由缺失问题
1.在项目中新建一个router.js router.js import Vue from 'vue' import Router from 'vue-router' import Home from ...
- Head First 设计模式 —— 05. 单例模式
全局变量的缺点 如果将对象赋值给一个全局变量,那么必须在程序一开始就创建好对象 P170 和 JVM 实现有关,有些 JVM 的实现是:在用到的时候才创建对象 思考题 Choc-O-Holic 公司使 ...
- 结合MATLAB、Python、R语言,在求得显著差异的边(节点对)之后,怎么画circle图
先来看看成果图: OK,开始画图: 实验背景声明:在脑影像分析中,我们首先构建脑网络,然 ...
- 【MySQL 高级】知识拓展
MySQL高级 知识拓展 MySQL高级 知识拓展 数据量 和 B+树 的关系 事务隔离级别集底层原理MVCC 唯一索引和普通索引的关键不同点 MRR:multi range read 练习和总结
- springBoot实现redis分布式锁
参考:https://blog.csdn.net/weixin_44634197/article/details/108308395 .. 使用redis的set命令带NX(not exist)参数实 ...
- kafka安装流程
本文是作者原创,版权归作者所有.若要转载,请注明出处. 安装前的环境准备 1.由于Kafka是用Scala语言开发的,运行在JVM上,在安装之前需要先安装JDK(省略) 2.kafka依赖zookee ...