js canvas 转动时钟实例
样本:http://js.zhuamimi.cn/shizhong/
我的百度经验:https://jingyan.baidu.com/article/1974b28935a46bf4b1f774a8.html
一、绘制圆盘
arc 方法:来构造圆形,其中 起始角设置为 0,结束角设置为 2*Math.PI
二、绘制圆点
与绘制圆形是一样的,只不过采用了 fillStyle属性来填充颜色。
三、绘制刻度
钟面共有60个刻度 。
在画上绘制刻度,其时也就是求每个刻度的坐标点。
公式如下:
假设圆心:o (x0,y0)
半径:r
角度:angle (角度是相对于图中红点位置而言,逆时针为负数,顺时针为正)
计算公式:
p2 (x1,y1), 其中angle = 30
x1 = x0 + r * cos(angle * PI / 180)
y1 = y0 + r * sin(angle * PI /180)
四、绘制指针
分针与秒针每次转动为6度,时针为30度。
秒针度数:当前秒数 * 6
分针度数: 当前分钟 * 6
时针的度数为: 当前时间 * 30 + 分针/ 2 。 (分针每次进一位时,时针增加 0.5度)
在转动指针时需要注意
1:旋转中心点为:原点(0,0) 可通过translate方法来映射原点位置。
2:存在多个旋转时,上一个会影响下一个。这时先采用save方法来保存坐标系状态,转动完后在用restore方法恢复回来。
五、实例调用
<!DOCTYPE html>
<html> <head>
<meta charset="utf8">
<title>canvas时钟</title>
<script src="Time.js"></script>
</head> <body> <canvas id="text" height="500" width="500"></canvas>
<script>
let element = document.querySelector("#text");
let canvas = new Panel(element);
canvas.dot = new Config(8,0,'red');
canvas.time();
</script>
</body> </html>
js canvas 转动时钟实例的更多相关文章
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- 利用js+canvas实现的时钟效果图
canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...
- canvas实践小实例一 —— 画板工具
前面讲了一部分的canvasAPI的基础知识,光看API的介绍确实是很无趣乏味,需要一点可以激发内心的激情的东西来激励自己来学习,于是就了伴随canvasAPI学习的小实例,这样通过API的知识,结合 ...
- canvas粒子时钟
前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...
- canvas画时钟,重拾乐趣!
canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 用canvas绘制时钟
用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...
- 使用canvas绘制时钟
使用canvas绘制时钟 什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
随机推荐
- Oracle开窗函数笔记及应用场景
介绍Oracle的开窗函数之前先介绍一下分析函数,因为开窗函数也属于分析函数 分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是:对于每个组返回多行,而聚合函数对于每个组只返回一行. 上面是 ...
- 一篇文章读懂HTTPS及其背后的加密原理
HTTPS(全称: Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.本文,就来深入介绍下其原理. 1 ...
- vim常用命令行备忘总结
一 窗口切换 1 :sp 水平切换当前窗口 2 :vsp 垂直切换当前窗口 3 :clo 关闭活动窗口 4 : on 只保留活动窗口 5 : ctrl + w 在窗口间循环切换 ctrl + ...
- 如何在 Linux 中查看可用的网络接口
在我们安装完一个 Linux 系统后最为常见的任务便是网络配置了.当然,你可以在安装系统时进行网络接口的配置.但是,对于某些人来说,他们更偏爱在安装完系统后再进行网络的配置或者更改现存的设置.众所周知 ...
- vmdk多文件合成单文件并导入
如果创建时,目录中有多个vmdk文件,可以将其合成一个,方便导到其他地方运行,如图所示 win下cmd命令,找到安装vmware目录,合并的命令如下 vmware-vdiskmanager.exe - ...
- nginx入门教程
nginx入门教程 一.概述 什么是nginx? Nginx (engine x) 是一款轻量级的Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 什么是反向 ...
- FileSync文件同步更新工具
FileSync是一款文件同步更新工具,它提供了对一个或多个应用的文件进行管理和同步更并功能,基于MD5的文件对比方式可以使管理者轻易地发布需要更新应用文件.FileSync主要模块包括:服务端,CL ...
- Spring Boot SOAP Webservice例子
前言 本文将学习如何利用Spring boot快速创建SOAP webservice服务: 虽然目前REST和微服务越来越流行,但是SOAP在某些情况下,仍然有它的用武之地: 在本篇 spring b ...
- 11 使用Tensorboard显示图片
首先,下载一张png格式的图片(注意:只支持png格式),命名为1.png.然后,打开PythonShell,输入以下代码: import tensorflow as tf # 获取图片数据 file ...
- Centos7安装MySQL8.0 - 操作手册
MySQL 8 正式版 8.0.11 已发布,官方表示 MySQL 8 要比 MySQL 5.7 快 2 倍,还带来了大量的改进和更快的性能! 一. Mysql8.0版本相比之前版本的一些特性 1) ...