会走动的图形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 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 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
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
详解python中的json和字典dict
2018/06/22 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Mac安装python3的方法步骤
2019/08/09 Python
python实现的Iou与Giou代码
2020/01/18 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
Java程序员面试题
2013/07/15 面试题
水果连锁超市创业计划书
2014/01/24 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
golang 实现两个结构体复制字段
2021/04/28 Golang
只用Python就可以制作的简单词云
2021/06/07 Python