<!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. <q> 与 <blockquote> 的区别

    <q> 标签在本质上与 <blockquote> 是一样的.不同之处在于它们的显示和应用.<q> 标签用于简短的行内引用.如果需要从周围内容分离出来比较长的部分(通 ...

  2. iSCSI 网关管理 - Storage6

    iSCSI网关集成了Ceph存储和iSCSI标准,以提供一个高可用性(HA) iSCSI目标,该目标将RADOS块设备(RBD)映像导出为SCSI磁盘.iSCSI协议允许客户机 (initiator) ...

  3. Python列表的深度排序

    实例1:>>>L = [2,3,1,4]>>>L.sort()>>>L>>>[1,2,3,4] 实例2:>>> ...

  4. Android self_adaption of screen

    以下是Demo首页的预览图 demo下载:http://www.eoeandroid.com/forum.php?mod=attachment&aid=NjE0Njh8ZTIyZDA2M2N8 ...

  5. kotlin系列文章 --- 2.基本语法

    函数 函数定义使用fun关键字,参数格式为:参数:类型,需要声明返回类型 fun sum(a:Int, b:Int): Int{ return a+b } 表达式作为函数体,返回值类型自动推断 fun ...

  6. Scala 学习笔记之集合(1)

    package com.citi.scala object CollectionDemo { def main(args: Array[String]): Unit = { /** * List */ ...

  7. SQL提高查询效率的几点建议

    1.如果要用子查询,那就用EXISTS替代IN.用NOT EXISTS替代NOT IN.因为EXISTS引入的子查询只是测试是否存在符合子查询中指定条件的行,效率较高.无论在哪种情况下,NOT IN都 ...

  8. 利用npm安装/删除/查看包信息

    查看远程服务器上的包的版本信息 npm view webpack version //查看npm服务器上包webpack的最新版本 npm view webpack versions //查看服务器上 ...

  9. LeetCode 第 287 号问题:寻找重复数,一道非常简单的数组遍历题,加上四个条件后感觉无从下手

    今天分享的题目来源于 LeetCode 第 287 号问题:寻找重复数. 题目描述 给定一个包含 n + 1 个整数的数组 nums,其数字都在 1 到 n 之间(包括 1 和 n),可知至少存在一个 ...

  10. X-扫描线算法

    多边形的扫描转换 多边形有两种重要的表示方法:顶点表示和点阵表示 顶点表示是用多边形的顶点序列来表示多边形.这种表示直观.几何意义强.占内存少,易于进行几何变换. 但由于它没有明确指出哪些象素在多边形 ...