会走动的图形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开启硬件加速的使用和坑
Aug 21 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 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分页类代码
2013/04/02 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
python抓取百度首页的方法
2015/05/19 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python目录和文件处理总结详解
2019/09/02 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
python isinstance函数用法详解
2020/02/13 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
python中pyplot基础图标函数整理
2020/11/10 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
如何选择使用结构还是类
2014/05/30 面试题
cf战队宣传语
2015/07/13 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python