html5制作一个时钟
试着用html5写一个时钟
记得开始这个随笔是几天前，一直保存在草稿里面，一直感觉有个东西搁在在那里，所以今天熬夜也要写完这篇博客！！！哈哈...不多说来上代码和思路。
---------------------------------------------------------------------------------------------
其实并不难，主要看你是否掌握了canvas下面几个属性:save(),restore();ratate();translate(),moveTo(),lineTo();beginPath();requestAnimationFrame()；在开始看下面的代码的时候最好先弄清楚这些方法的原理和作用，另外canvas有个重要特性:canvas是基于状态的绘制，所以每次旋转都是接着上次旋转的基础上继续旋转，所以在使用图形变换的时候必须搭配save()与restore()方法.
好了，开始代码，先开始画12个小时和60分钟的线条(一些需要步骤在代码有注释):
function rotateFun(){
var now= new Date();//获取当前时间对象，对以后指针旋转很重要
var ctx=document.getElementById("canvas").getContext("2d");//取的画布环境
ctx.clearRect(0,0,800,600);//在开始之前都要清空画布，因为不清空就会所有的痕迹在画布上显示
ctx.save();//第一个保存状态
ctx.fillStyle='rgba(20,20,20,0.2)';
ctx.fillRect(0,0,800,600);
ctx.translate(400,300);//平移画布中心到中心
//画12个小时
ctx.save();
for (var i = 0; i < 12; i++) {
ctx.strokeStyle='black';
ctx.rotate(2*Math.PI/12);
ctx.moveTo(120,0);
ctx.lineTo(100,0);
ctx.lineWidth=8;
ctx.stroke();
}
ctx.restore();
//画60个分钟
ctx.save();
for (var i = 0; i <60 ;i++) {
ctx.strokeStyle='black';
ctx.rotate(2*Math.PI/60);
ctx.moveTo(115,0);
ctx.lineTo(105,0);
ctx.lineWidth=2;
ctx.stroke();
}
ctx.restore();
ctx.restore()
}
-----------------------------------------------------------------------
静态完了就是动态的，指针随着时间而走动.这里指针走的原理是：每一帧调用后都是重新画的一个画布，里面的指针，12个小时和60分钟的线条都是新的，只是下一秒后就物是人非，整个画布就转了某个角度，但是指针相对画布还是静止没有变过的，所以我们的眼睛就会产生了指针随着时间走的效果，另外就是指针指在当前时间都是参数控制的，代买如下:
var hour=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds(); //画秒针
ctx.save();
ctx.beginPath();
ctx.rotate(sec*Math.PI/30);
ctx.strokeStyle='black';
ctx.lineWidth=4;
ctx.moveTo(0,30);
ctx.lineTo(0,-112);
ctx.stroke();
ctx.closePath();
ctx.restore(); //画分钟
ctx.save();
ctx.beginPath();
ctx.rotate(min*Math.PI/30+sec*Math.PI/1800);
ctx.strokeStyle='black';
ctx.lineWidth=6;
ctx.moveTo(0,28);
ctx.lineTo(0,-83);
ctx.stroke();
ctx.closePath();
ctx.restore(); //画时钟
ctx.save();
ctx.beginPath();
ctx.rotate(hour*Math.PI/6+min*Math.PI/360+sec*Math.PI/21600);
ctx.strokeStyle='black';
ctx.lineWidth=8;
ctx.moveTo(0,26);
ctx.lineTo(0,-63);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle='blue';
ctx.arc(0,0,126,0,2*Math.PI);
ctx.stroke();
ctx.closePath();
ctx.restore();
ctx.restore();
------------------------------------------------------------
好了，知道了这些原理：给出完整的代码,这些代码还有优化改进的地方：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
</head>
<body>
<canvas id='canvas' width="800" height="600"></canvas>
<script>
function rotateFun(){
var now= new Date();//获取当前时间对象，对以后指针旋转很重要 var ctx=document.getElementById("canvas").getContext("2d");//取的画布环境 ctx.clearRect(0,0,800,600);//在开始之前都要清空画布，因为不清空就会所有的痕迹在画布上显示 ctx.save();//第一个保存状态
ctx.fillStyle='rgba(20,20,20,0.2)';
ctx.fillRect(0,0,800,600);
ctx.translate(400,300);//平移画布中心到中心 //画12个小时
ctx.save();
for (var i = 0; i < 12; i++) {
ctx.strokeStyle='black';
ctx.rotate(2*Math.PI/12);
ctx.moveTo(120,0);
ctx.lineTo(100,0);
ctx.lineWidth=8;
ctx.stroke();
}
ctx.restore(); //画60个分钟
ctx.save();
for (var i = 0; i <60 ;i++) {
ctx.strokeStyle='black';
ctx.rotate(2*Math.PI/60);
ctx.moveTo(115,0);
ctx.lineTo(105,0);
ctx.lineWidth=2;
ctx.stroke();
}
ctx.restore(); var hour=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds(); //画秒针
ctx.save();
ctx.beginPath();
ctx.rotate(sec*Math.PI/30);
ctx.strokeStyle='black';
ctx.lineWidth=4;
ctx.moveTo(0,30);
ctx.lineTo(0,-112);
ctx.stroke();
ctx.closePath();
ctx.restore(); //画分钟
ctx.save();
ctx.beginPath();
ctx.rotate(min*Math.PI/30+sec*Math.PI/1800);
ctx.strokeStyle='black';
ctx.lineWidth=6;
ctx.moveTo(0,28);
ctx.lineTo(0,-83);
ctx.stroke();
ctx.closePath();
ctx.restore(); //画时钟
ctx.save();
ctx.beginPath();
ctx.rotate(hour*Math.PI/6+min*Math.PI/360+sec*Math.PI/21600);
ctx.strokeStyle='black';
ctx.lineWidth=8;
ctx.moveTo(0,26);
ctx.lineTo(0,-63);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle='blue';
ctx.arc(0,0,126,0,2*Math.PI);
ctx.stroke();
ctx.closePath();
ctx.restore();
ctx.restore(); window.requestAnimationFrame(rotateFun);
} rotateFun();
</script>
</body>
</html>
00:45:50
html5制作一个时钟的更多相关文章
- 利用html5制作一个时钟动画
<canvas id="clock" width="500" height="500" style="background- ...
- HTML5应用之时钟
利用HTML5的Canvas API可以完成我们以前意想不到的动画效果,以前我们想在网页上放置一个时钟,需要先用flash工具制作一个钟表,并写上复杂的JavaScript代码,然后载入到页面中.而H ...
- 用Phaser来制作一个html5游戏——flappy bird （二）
在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...
- 使用HTML5制作时钟
之前看到别人用HTML5制作时钟,自己也写了一个,这是很久以前写的了,没有注释,现在自己看都晕了(注释的重要性就体现在这边了),找时间加上注释,让自己和别人都比较好理解. <!DOCTYPE h ...
- 用Phaser来制作一个html5游戏——flappy bird （一）
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...
- html5写的一个时钟
看到的一个html5写的时钟 <!doctype> <html> <head> <script> window.onload=function(){ v ...
- 小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器
来自:http://blog.csdn.net/dawanganban/article/details/17679069 在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的 ...
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
- 利用javafx编写一个时钟制作程序
1.首先创建一个时钟类,用于编写时钟的各种特有属性 package javaclock; /** * * @author admin */import java.util.Calendar;impor ...
随机推荐
- Innosetup中将bat文件压缩到压缩包中
有时候在安装的过程中需要调用某些文件(bat或者exe等文件),但是只需要使用一次,然后就可以删掉该文件, 在Innosetup中应该这样操作: 1.在.iss脚本的[Files]章节写下: So ...
- linux驱动学习之Input输入子系统
以前,看过国嵌关于input子系统的视频课程,说实话,我看完后脑子里很乱,给我的印象好像是input子系统驱动是一个全新的驱动架构,疑惑相当多.前几天在网上,看到有很多人介绍韦东山老师的linux驱动 ...
- Ext vtype
//form验证中vtype的默认支持类型1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)2.alphanum//只能输入字母和数字,无法输入其他3.email//email验证, ...
- POJ 1743 后缀数组不重叠最长重复子串
#include<stdio.h> #include<string.h> #include<algorithm> #define maxn 30000 using ...
- js控制TR的显示隐藏
在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,如何控制,本文为大家揭晓 下文分享的一段代码:选择是的按钮就显示身高和体重的文本框的代码.注意:r ...
- java解析xml的4种经典方法
========================================== xml文件 <?xml version="1.0" encoding="GB2 ...
- Java注解（Annotation）自定义注解入门
要深入学习注解,我们就必须能定义自己的注解,并使用注解,在定义自己的注解之前,我们就必须要了解Java为我们提供的元注解和相关定义注解的语法. 元注解: 元注解的作用就是负责注解其他注解.Java5. ...
- LoadRunner界面分析（三）
1.Anaysis基础知识 2.Analysis 报告 3.Analysis分析基础 4.IP欺骗 需要使用ip欺骗的原因:1.当某个IP的访问过于频繁,或者访问量过大是,服务器会拒绝访问请求,这时候 ...
- go五笔——基于Google在线五笔制作
go五笔 v0.0.2 加入新世纪版 86版收录几个不常用汉字,其它无更新 下载 86版64位密码: qe7k 86版32位密码: y25a 06版64位密码: d2ug 06版32位密码: bxxz ...
- [HttpException (0x80004005): The current identity
[HttpException (0x80004005): The current identity (IIS APPPOOL\NationalUnion.Shared) does not have w ...