<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <canvas id="canvas1" width="800" height="600"></canvas>

        <!--

            1：表盘

            2：刻度

            3：指针

            4：获取时间

            获取时间，重新绘制：每隔1秒钟绘制：

        -->

        <script type="text/javascript">

            var canvas1 = document.querySelector('#canvas1')

            var ctx = canvas1.getContext('2d')

            function drawTime(){

                //清盘

                ctx.clearRect(0,0,800,600)

                //表盘

                ctx.beginPath()

                ctx.arc(400,300,200,0,2*Math.PI)

                ctx.lineWidth = 10

                ctx.strokeStyle = 'grey'

                ctx.stroke()

                ctx.closePath()

                ctx.save()//保留这个坐标系的位置，以及保留ctx的属性样式

                //刻度

                ctx.translate(400,300)

                ctx.save()//保留了移动后的坐标原点为400，300像素位置的坐标系

                //分针的刻度

                for(var i = 0; i< 60;i++){

                    ctx.beginPath()

                    //移动坐标系

                    //有60个刻度，所以每一次旋转360(2*Math.pi)/60

                    ctx.rotate(2*Math.PI/60)

                    ctx.moveTo(170,0)

                    ctx.lineTo(190,0)

                    ctx.lineWidth = 5

                    ctx.strokeStyle = '#aaa'

                    ctx.stroke()

                    ctx.closePath()

                }

                ctx.restore()//恢复到没有旋转前，恢复到坐标系为400，300像素位置的坐标系

                ctx.save()

                //时钟的刻度

                for(var i = 0; i< 12;i++){

                    ctx.beginPath()

                    //移动坐标系

                    //有60个刻度，所以每一次旋转360(2*Math.pi)/60

                    ctx.rotate(2*Math.PI/12)

                    ctx.moveTo(165,0)

                    ctx.lineTo(190,0)

                    ctx.lineWidth = 10

                    ctx.strokeStyle = '#333'

                    ctx.stroke()

                    ctx.closePath()

                }

                ctx.restore()

                ctx.save()

                //获取时间

                var nowTime = new Date()

    //            console.log(nowTime)

                //获取小时

                var hour = nowTime.getHours()

                //获取分

                var min = nowTime.getMinutes()

                //获取秒

                var sec = nowTime.getSeconds()

                if(hour>=12){

                    hour = hour-12

                }

                console.log(hour,min,sec)

                //将坐标系逆时针旋转90

                ctx.rotate(-2*Math.PI/4)

                ctx.save()

                //首先绘制秒针

                ctx.beginPath()

                ctx.rotate(2*Math.PI/60*sec)

                ctx.moveTo(-20,0)

                ctx.lineTo(150,0)

                ctx.lineWidth = 3

                ctx.strokeStyle = 'red'

                ctx.stroke()

                ctx.closePath()

                ctx.restore()

                ctx.save()

                //绘制分针

                ctx.beginPath()

                ctx.rotate(2*Math.PI/60*min + 2*Math.PI/60*sec/60)

                ctx.moveTo(-15,0)

                ctx.lineTo(140,0)

                ctx.lineWidth = 5

                ctx.strokeStyle = 'darkslategray'

                ctx.stroke()

                ctx.closePath()

                ctx.restore()

                ctx.save()

                //绘制时针

                ctx.beginPath()

                ctx.rotate(2*Math.PI/12*hour+2*Math.PI/12*min/60+ 2*Math.PI/12/60*sec/60)

                ctx.moveTo(-10,0)

                ctx.lineTo(100,0)

                ctx.lineWidth = 10

                ctx.strokeStyle = 'darkslategray'

                ctx.stroke()

                ctx.closePath()

                ctx.restore()

                ctx.restore()

                ctx.restore()

                requestAnimationFrame(drawTime)

            }

            //这是第一种画动画的方式

//            setInterval(function(){

//                drawTime()

//            },20)

            //尽最大能力去渲染，也可以保证不卡帧，请求动画帧的方法。

            requestAnimationFrame(drawTime)

        </script>

    </body>

</html>

时针.html的更多相关文章

  1. 【模拟，时针分针秒针两两夹角】【没有跳坑好兴奋】hdu - 5387 （多校#8 1008）

    算是最好写的一道题了吧,最近模拟没手感,一次过也是很鸡冻o(*￣▽￣*)o 注意事项都在代码里,没有跳坑也不清楚坑点在哪~ #include<cstdio> #include<cst ...

  2. Android_模拟时钟内时针、分针触摸转动

    最近实现了android里的一个机能,在activity里面画了一个模拟的时针,然后触摸上面的时针跟分针可以实现调时间的功能. 其实,说起原来来还是挺简单的,但是我花了将近一周的时间才全部实现,有点惭 ...

  3. Android-自定义控件之时针-霞辉

    注释已经比较详细了,废话就不多说了.贴代码了 时针分针秒钟都做上去了,采用的方法也很简单,仔细看一会就能看懂 自定义View类 package com.xh.mytime; import java.u ...

  4. uva 579 ClockHands 几何初接触 求时针与分针的夹角

    貌似是第一次接触几何题... 求时针与分针的夹角,这不是小学生的奥数题么.我小时候也想过这问题的. 每过一小时时针走1/12*360=30度,每过一分钟时针走1/60*30=0.5度,分针走1/60* ...

  5. threejs三角形Geometry的顶点时针顺序会导致三角形看不见

    var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75,winSize.width/winSize.hei ...

  6. 时针分针角度问题c语言解法

    #include <stdio.h> //时针一小时走30度 double hour_per_hour_angle = 30.0; //先算出时针和分钟 一分钟内 分别走多少度数 //时针 ...

  7. 剑指offer系列18---顺时针打印矩阵

    [题目]定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数.要求时间复杂度是O(1).push pop min [思路]设计一个辅助栈,当新加入的原数据栈中的数小于辅助栈顶的数时就加 ...

  8. 剑指offer系列17---顺时针打印矩阵（不是很懂）

    package com.exe4.offer; import java.util.ArrayList; /** * 17[题目]输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果 ...

  9. [剑指Offer]29-顺时针打印矩阵-Java

    题目链接 https://www.nowcoder.com/practice/9b4c81a02cd34f76be2659fa0d54342a?tpId=13&tqId=11172&t ...

随机推荐

  1. Java中Synchronized的优化原理

    我们知道,从 JDK1.6 开始,Java 对 Synchronized 同步锁做了充分的优化,甚至在某些场景下,它的性能已经超越了 Lock 同步锁.那么就让我们来看看,它究竟是如何优化的. 原本的 ...

  2. 死磕 java同步系列之zookeeper分布式锁

    问题 (1)zookeeper如何实现分布式锁? (2)zookeeper分布式锁有哪些优点? (3)zookeeper分布式锁有哪些缺点? 简介 zooKeeper是一个分布式的,开放源码的分布式应 ...

  3. Angular 自定义管道

    管道的作用就是将原始值进行转化处理,转换为所需要的值: 1. 新建sex-reform.pipe.ts文件 ng g pipe sex-reform 2. 编辑sex-reform.pipe.ts文件 ...

  4. python 列表，集合，字典，字符串的使用

    PY PY基础 append 在末尾添加元素 pop 删除末尾元素 insert(i,item)在i位插入元素 pop(i)删除i位元素 只有1个元素的tuple定义时必须加一个逗号,,来消除歧义 i ...

  5. java多态的实现原理（JVM调用过程）（综合多篇文章，参考见文末）

    一个对象变量可以指示多种实际类型的现象称为多态 允许不同类的对象对同一消息做出响应.方法的重载.类的覆盖正体现了多态. 1.多态的机制 1.1 本质上多态分两种 1.编译时多态(又称静态多态) 2.运 ...

  6. Docker 学习笔记之 核心概念

    Docker核心概念: Docker Daemon Docker Container Docker Registry Docker Client 通过rest API 和Docker Daemon进程 ...

  7. Springboot + Mysql8实现读写分离

    在实际的生产环境中,为了确保数据库的稳定性,我们一般会给数据库配置双机热备机制,这样在master数据库崩溃后,slave数据库可以立即切换成主数据库,通过主从复制的方式将数据从主库同步至从库,在业务 ...

  8. 【MySQL】mysql5.7数据库的安装和配置

    第一步:直接从官网下载安装包,.msi 可以直接点击安装..zip直接解压到目录,本人是C:\Program Files\MySQL\mysql-5.7 第二步:需要配置环境变量,我的电脑->属 ...

  9. Hadoop-2.7.3-本地模式安装-wordcount例子

    准备虚拟机:linux-rhel-7.4-server,由于不使用虚拟机进行联网,所以选择host-only网络模式.此处,需要再VitralBox的管理菜单中的主机网络管理器新建一个虚拟网卡.安装完 ...

  10. 【TencentOS tiny】又有一个操作系统开源

    新闻 2019年9月18日,腾讯宣布将开源 自主研发的轻量级物联网实时操作系统TencentOS tiny.相比市场上其它系统,腾讯TencentOS tiny在资源占用.设备成本.功耗管理以及安全稳 ...