时针.html
<!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的更多相关文章
- 【模拟,时针分针秒针两两夹角】【没有跳坑好兴奋】hdu - 5387 (多校#8 1008)
算是最好写的一道题了吧,最近模拟没手感,一次过也是很鸡冻o(* ̄▽ ̄*)o 注意事项都在代码里,没有跳坑也不清楚坑点在哪~ #include<cstdio> #include<cst ...
- Android_模拟时钟内时针、分针触摸转动
最近实现了android里的一个机能,在activity里面画了一个模拟的时针,然后触摸上面的时针跟分针可以实现调时间的功能. 其实,说起原来来还是挺简单的,但是我花了将近一周的时间才全部实现,有点惭 ...
- Android-自定义控件之时针-霞辉
注释已经比较详细了,废话就不多说了.贴代码了 时针分针秒钟都做上去了,采用的方法也很简单,仔细看一会就能看懂 自定义View类 package com.xh.mytime; import java.u ...
- uva 579 ClockHands 几何初接触 求时针与分针的夹角
貌似是第一次接触几何题... 求时针与分针的夹角,这不是小学生的奥数题么.我小时候也想过这问题的. 每过一小时时针走1/12*360=30度,每过一分钟时针走1/60*30=0.5度,分针走1/60* ...
- threejs三角形Geometry的顶点时针顺序会导致三角形看不见
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75,winSize.width/winSize.hei ...
- 时针分针角度问题c语言解法
#include <stdio.h> //时针一小时走30度 double hour_per_hour_angle = 30.0; //先算出时针和分钟 一分钟内 分别走多少度数 //时针 ...
- 剑指offer系列18---顺时针打印矩阵
[题目]定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数.要求时间复杂度是O(1).push pop min [思路]设计一个辅助栈,当新加入的原数据栈中的数小于辅助栈顶的数时就加 ...
- 剑指offer系列17---顺时针打印矩阵(不是很懂)
package com.exe4.offer; import java.util.ArrayList; /** * 17[题目]输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果 ...
- [剑指Offer]29-顺时针打印矩阵-Java
题目链接 https://www.nowcoder.com/practice/9b4c81a02cd34f76be2659fa0d54342a?tpId=13&tqId=11172&t ...
随机推荐
- 删除pdf中的链接
在Acrobat中打开pdf文件,然后:编辑→首选项→一般→自动从文本检测URL,把此处的对勾去掉,以后就不会变为食指按的形状了! 还有以下的方法 方法1:“高级(A)”→“链接(L)”→“删除文档中 ...
- 探索ASP.NET Core 3.0系列一:新的项目文件、Program.cs和generic host
前言:在这篇文章中我们来看看ASP.Net Core 3.0应用程序中一些基本的部分—— .csproj项目文件和Program.cs文件.我将会介绍它们从 ASP.NET Core 2.x 中的默认 ...
- Git项目分支分配
主要分支包含master分支与develop分支,临时分支可以分为: release: 从develop分出 ,是最终要发布的版本. feature: 实现某功能时推荐新建分支,从develop分出. ...
- SkyWalking系列(一):初探
SkyWalking已经再微服务商城系列里使用了,本篇将介绍如何再Windows系统下安装并简单使用. 1.下载SkyWaling 本篇测试使用6.0版本:http://skywalking.apac ...
- ouc_software第一次作业:OUC二手物品交易
一.前言 1.项目名称:ouc二手物品交易 2.项目简介 (1)创办一个网上校内二手物品交易平台,供校内师生进行交易二手物品. (2)经过身份认证的用户,可将自己想要交易的二手物品发布至平台,供其他用 ...
- ng 点击事件
执行事件获取数据 <div class="shijian"> <p>ng 事件</p> <p><button (click)= ...
- Fast Earth - 文本 绘制,如何实现三维空间中绘制屏幕大小的文字?
如题:先上一张图,在说是如何实现的 实现上图效果,有如下三种方式: 1. 屏幕坐标绘制点要素,即将经纬度坐标转换成屏幕坐标方式绘制,大多数GIS系统都是采用这种方式: 优点:实现方式简单,效果较好 缺 ...
- svg foreignObject的作用(文本换行,生成图片)
SVG内部利用foreignObject嵌入XHTML元素 <foreignObject>元素的作用是可以在其中使用具有其它XML命名空间的XML元素,换句话说借助<foreignO ...
- Java 学习笔记之 Stop停止线程
Stop停止线程: 使用stop()方法停止线程是非常暴力的,会抛出java.lang.ThreadDeath Error,但是我们无需显示捕捉, 以下捕捉只是为了看得更清晰. public clas ...
- Go语言及Beego框架环境搭建
在开始环境搭建之前,我们先一起来看看: Go有什么优势: 不用虚拟机,它可直接编译成机器码,除了glibc外没有其他外部依赖,部署十分方便,就是扔一个文件就完成了. 天生支持并发,可以充分的利用多核, ...