会走动的图形html5时钟示例


Posted in HTML / CSS onApril 27, 2014

使用HTML5制作时钟

会走动的图形html5时钟示例

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<title>html5时钟</title>
</head>
<body>
<canvas id = "canvas"></canvas></p> <p> <script>
var Clock = function (canvas, options) {
this.canvas = canvas;
this.ctx = this.canvas.getContext("2d");
this.options = options;
};</p> <p> Clock.prototype = {
constructor: Clock,
drawCircle: function () {
var ctx = this.ctx;
ctx.strokeStyle = "black";
ctx.arc(this.canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * Math.PI, false);
ctx.stroke();
},
drawNum: function () {
var ctx = this.ctx;
var angle = Math.PI * 2 / 12;
for (var i = 1; i <= 12; i += 1) {
ctx.font = "20px Georgia";
ctx.textAlign = "center";
ctx.textBaseline = 'middle';
ctx.fillText(String(i), this.canvas.width / 2 + Math.cos(3 *Math.PI / 2 + angle * i) * 40, this.canvas.height / 2 + Math.sin(3 * Math.PI / 2 + angle * i) * 40);
}
},
drawPointer: function () {
var ctx = this.ctx;
var that = this;
var date, hour, minute, second;
date = new Date();
hour = date.getHours();
if (hour > 12) {
hour = hour % 12;
}
minute = date.getMinutes();
second = date.getSeconds();</p> <p> var b = minute * Math.PI / 30;
var c = second * Math.PI / 30;
var a = hour * Math.PI / 6 + Math.PI / 6 * minute / 60;
var minuteAngle = Math.PI * 2 / 3600;
var secondAngle = Math.PI * 2 / 60;
var hourAngle = Math.PI * 2 / 12 / 3600;</p> <p> ctx.beginPath();
ctx.save();
ctx.translate(that.canvas.width / 2, that.canvas.height / 2);
ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
a += hourAngle;
ctx.rotate(a);
ctx.fillRect(-2, -22, 4, 30);
ctx.closePath();
ctx.beginPath();
b += minuteAngle;
ctx.rotate(b - a);
ctx.fillRect(-1.5, -26, 3, 35);
ctx.closePath();
ctx.beginPath();
c += secondAngle;
ctx.rotate(c - b);
ctx.fillRect(-1, -30, 2, 40);
ctx.closePath();
ctx.restore();
},
rePaint: function () {
this.drawPointer();
this.drawCircle();
this.drawNum();
},
tik: function () {
var that = this;
var ctx = this.ctx;
this.rePaint();
window.timer = setInterval(function () {
ctx.clearRect(0, 0, that.canvas.width, that.canvas.height);
that.rePaint();
}, 1000);
}
};</p> <p> var options;
var clock = new Clock(document.getElementById("canvas"), options);
clock.tik();
</script>
</body>
</html>

保存后使用浏览器运行,可以看到走动的圆形时钟,大家试试看吧

HTML / CSS 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 #HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 #HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 #HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 #HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 #HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 #HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 #HTML / CSS
You might like
PHP 中的一些经验积累
2006/10/09 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
js中onload与onunload的使用示例
2013/08/25 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
mpvue跳转页面及注意事项
2018/08/03 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
单链表反转python实现代码示例
2018/02/08 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
Python函数参数操作详解
2018/08/03 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
接口的多继承会带来哪些问题
2015/08/17 面试题
垃圾回收的优点和原理
2014/05/16 面试题
校园餐饮创业计划书
2014/01/10 职场文书
党员一句话承诺大全
2014/03/28 职场文书
护理学专业求职信
2014/06/29 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
上下班时间调整通知
2015/04/23 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
酒店厨房管理制度
2015/08/06 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
聘任书的格式及模板
2019/10/28 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
python文件目录操作之os模块
2021/05/08 Python