源码:https://pan.baidu.com/s/1R12MwZYs0OJw3OWKsc8WNw

样本: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 转动时钟实例的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

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

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

  3. canvas实践小实例一 —— 画板工具

    前面讲了一部分的canvasAPI的基础知识,光看API的介绍确实是很无趣乏味,需要一点可以激发内心的激情的东西来激励自己来学习,于是就了伴随canvasAPI学习的小实例,这样通过API的知识,结合 ...

  4. canvas粒子时钟

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...

  5. canvas画时钟,重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  6. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  7. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  8. 用canvas绘制时钟

    用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...

  9. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

随机推荐

  1. 替换Jar包里文件

    jar uvf test.jar com/test/test.class 这里值得注意的是  test.class 必须放在com/test 文件下,要和jar的路径对应起来.不然会说 没有这个文件或 ...

  2. Office 365 – SharePoint 2013 Online 中添加域和域名

    1.在SharePoint Online管理中心,点击菜单上的添加域,如下图: 2.进入管理域的页面,点击添加域来添加我们自己的域名,如下图: 3.进入“在 Office 365中添加新域”的向导,跟 ...

  3. 将pdf文件通过itunes直接拖到ipad的ibooks里面

    开始不太清楚进行过什么设置,使得以前可以直接通过拖动的方式复制pdf文件到ipad里面的方法不管用了.在帖子http://bbs.weiphone.com/read-htm-tid-864091-pa ...

  4. Lintcode: Update Bits

    Given two 32-bit numbers, N and M, and two bit positions, i and j. Write a method to set all bits be ...

  5. mssql server for docker on MacOs

    1. install 1.下载镜像 docker pull microsoft/mssql-server-linux 使用该命令就可以把数据库的docker镜像下载下来. 2.创建并运行容器 dock ...

  6. vue-cli3.0 项目如何使用sass

    执行: npm install node-sass --save-dev npm install sass-loader --save-dev 自动安装sass,vue-cli3.0 不需要在 web ...

  7. Python 进程之间共享数据

    最近遇到多进程共享数据的问题,到网上查了有几篇博客写的蛮好的,记录下来方便以后查看. 一.Python multiprocessing 跨进程对象共享  在mp库当中,跨进程对象共享有三种方式,第一种 ...

  8. 二手回收能否翻过BAT这座大山?

    自2015年几大合并事件后,互联网江山基本都归于BAT三家.即便近日战火熊熊的本地生活和外卖也都是百度.阿里和腾讯的家门事.创业浪潮在2015年疯狂过后,留给下一年的风口似乎不多了. 不过有媒体预测智 ...

  9. verilog中的default应该赋什么样的值

    Q:在状态机的case语句中,最后要加上默认项default,可是我看到有的书上写的是一个确定的状态,有的则是不定态xxx,到底应该写那个啊?求助! A1:取决于case条件是否完备啦如果你的case ...

  10. [转]使用TeamCity对项目进行可持续集成管理(一)

    一.可持续集成管理 持续集成,CI:即Continuous integration. 可持续集成的概念是基于团队(小组)协作开发而提出来的,为了提高团队开发效率与降低集成风险(早发现,早解决.晚发现, ...