源码：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. Spring Boot 2 - 使用CommandLineRunner与ApplicationRunner

    本篇文章我们将探讨CommandLineRunner和ApplicationRunner的使用. 在阅读本篇文章之前,你可以新建一个工程,写一些关于本篇内容代码,这样会加深你对本文内容的理解,关于如何 ...

  2. 网络编程懒人入门(九)：通俗讲解，有了IP地址，为何还要用MAC地址？

    1.前言 标题虽然是为了解释有了 IP 地址,为什么还要用 MAC 地址,但是本文的重点在于理解为什么要有 IP 这样的东西.本文对读者的定位是知道 MAC 地址是什么,IP 地址是什么. (本文同步 ...

  3. Android 视频播放器 (二)：使用MediaPlayer播放视频

    在 Android 视频播放器 (一):使用VideoView播放视频 我们讲了一下如何使用VideoView播放视频,了解了基本的播放器的一些知识和内容.也知道VideoView内部封装的就是Med ...

  4. 2个简单实例让你快速理解try-catch的用法

    相信在实际项目中,你可能经常会看到类似下面的代码 try { // 尝试执行代码块 } catch(err) { // 捕获错误的代码块 } finally { // 结果如何都会执行的代码块 } 简 ...

  5. Vue : Expected the Promise rejection reason to be an Error

    在vue项目中添加ESLint,new 一个 Promise 一直显示错误 :Expected the Promise rejection reason to be an Error 正常来说new ...

  6. vue 解决无法设置滚动位置的问题

    问题描述 在实现锚点定位的时候发现无法设置滚动条的位置. 在Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度. document.body.scrollTo ...

  7. 【shiro】(1)---了解权限管理

    了解权限管理 一.概念 1.什么是权限管理 只要有用户参与的系统一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问而且只能访问自己被授权的资源. 权限管理包 ...

  8. mysql 开发进阶篇系列 51 权限与安全(权限表user,db详细介绍 )

    一.概述 mysql 的权限系统主要用来对连接到数据库的用户进行权限验证,以此来判断此用户是否属于合法用户,以及合法用户给予的相应数据库权限.下面将介绍权限系统的工作原理,以及将要熟练掌握账号的管理和 ...

  9. 《JavaScript总结》js模块化

    模块化开发,可以让代码易于扩展.便于日后维护. ES6中的模块化 我们先了解一下 export(导出) 和 import(导入) 这两个关键字. 新建一个文件a.js 并且导出变量test expor ...

  10. lua中 table 重构index/pairs元方法优化table内存占用

    转载请标明出处http://www.cnblogs.com/zblade/ lua作为游戏的热更新首选的脚本,其优势不再过多的赘述.今天,我主要写一下如何重写lua中的元方法,通过自己的重写来实现对l ...