会走动的图形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 相关文章推荐
CSS3轻松实现圆角效果
Nov 09 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 HTML / CSS
HTML中link标签属性的具体用法
May 07 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
php批量上传的实现代码
2013/06/09 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
php图片裁剪函数
2018/10/31 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Python 学习教程之networkx
2019/04/15 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
什么是Web Service?
2012/07/25 面试题
学校食堂采购员岗位职责
2013/12/05 职场文书
高中体育教学反思
2014/01/29 职场文书
验房委托书
2014/08/30 职场文书
爱护公物演讲稿
2014/09/09 职场文书
师德师风自我评价范文
2014/09/11 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python