canvas实现时钟
最近在看新浪体育网球频道(http://sports.sina.com.cn/tennis/)的时候,看到了下面的劳力士广告的时钟是用canvas做的,于是也实现了一个简单的canvas时钟。直接上代码:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>clock</title>
</head> <body>
<canvas id="clock" width="500" height="700"></canvas>
<script type="text/javascript" src="js/clock.js"></script>
</body> </html>
//时钟
function clock(canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.clear = function() {
var ctx = this.ctx;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
} //初始化调用
this.init = function() {
//图片加载
var clockImage = new Image();
var that = this;
clockImage.src = './images/clock.png';
clockImage.onload = function() {
setInterval(function() {
that.drawClock(clockImage);
}, 1000)
}
}
//画时钟
this.drawClock = function(img) {
this.clear();
this.drawClockBg(img);
this.drawTime();
}
//画时钟背景
this.drawClockBg = function(img) {
var ctx = this.ctx;
ctx.drawImage(img, 0, 0, 500, 500);
ctx.save();
//转到原点
ctx.translate(500 / 2, 500 / 2);
//画数字
var clockRadius = 250;
ctx.font = '36px Arial';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (var n = 1; n <= 12; n++) {
var theta = (n - 3) * (Math.PI * 2) / 12;
var x = clockRadius * 0.7 * Math.cos(theta);
var y = clockRadius * 0.7 * Math.sin(theta);
ctx.fillText(n, x, y);
}
ctx.restore();
} //画时间
this.drawTime = function() {
// 获取时间
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var temhours = hours > 12 ? hours - 12 : hours;
var hour = temhours + minutes / 60;
var minute = minutes + seconds / 60;
var ctx = this.ctx;
var clockRadius = 250; ctx.save();
ctx.fillStyle = '#000';
//重新转到时钟原点
ctx.translate(500 / 2, 500 / 2); //画时针
ctx.save();
//计算出线转动的角度
var theta = (hour - 3) * 2 * Math.PI / 12;
ctx.rotate(theta);
ctx.beginPath();
//通过画线划出时针
ctx.moveTo(-15, -5);
ctx.lineTo(-15, 5);
ctx.lineTo(clockRadius * 0.5, 1);
ctx.lineTo(clockRadius * 0.5, -1);
ctx.fill();
ctx.restore(); // 画分针
ctx.save();
var theta = (minute - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -4);
ctx.lineTo(-15, 4);
ctx.lineTo(clockRadius * 0.8, 1);
ctx.lineTo(clockRadius * 0.8, -1);
ctx.fill();
ctx.restore(); // 画秒针
ctx.save();
var theta = (seconds - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -3);
ctx.lineTo(-15, 3);
ctx.lineTo(clockRadius * 0.9, 1);
ctx.lineTo(clockRadius * 0.9, -1);
ctx.fillStyle = '#0f0';
ctx.fill();
ctx.restore(); ctx.restore();
//画当前时间
ctx.font = "60px impact";
ctx.fillStyle = '#960';
ctx.textAlign = 'center';
ctx.fillText((hours > 9 ? hours : '0' + hours) + ':' + (minutes > 9 ? minutes : '0' + minutes) + ':' + (seconds > 9 ? seconds : '0' + seconds), 250, 600);
}
} window.addEventListener('load', function() {
canvas = document.getElementById('clock');
new clock(canvas).init();
});
这里的实现还是比较简单的。利用Date对象,获取当前的时间,然后画出当前时间点的钟表状态,最后用setInternval,每秒钟清除画布,重新再画一下一个钟表。里面用到的canvasAPI就不细说了,感兴趣的可以去了解一下canvas的API,它提供了很多强大的功能。
canvas实现时钟的更多相关文章
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- 使用canvas绘制时钟
使用canvas绘制时钟 什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
- HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- [ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
- canvas粒子时钟
前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...
- canvas画时钟,重拾乐趣!
canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...
- 用canvas绘制时钟
用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...
- Canvas绘制时钟
①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...
随机推荐
- linux和Mac上安装composer
使用命令行方式,可以直接使用下面的命令,顺序执行: php -r "copy ('https://getcomposer.org/installer','composer-setup.php ...
- [转帖]以Windows服务方式运行ASP.NET Core程序
以Windows服务方式运行ASP.NET Core程序 原作者blog: https://www.cnblogs.com/guogangj/p/9198031.htmlaspnet的blog 需要持 ...
- Linux大页内存管理等---菜鸟初学
1. 查看linux的内存情况: free -m 2. 查看是否开启大页的方法: cat /proc/meminfo |grep -i HugePage AnonHugePages: 276480 k ...
- php开发APP接口(总结一)
一.什么是app接口:服务端与客户端的数据交互. 大部分APP接口是通过http协议通信的. http通信的三要素: URL: 通信的地址 Method:通信的方式(get | post | pu ...
- ubuntu查看本地ip
1.下载net-tools sudo apt-get install net-tools 2.终端输入命令 ifconfig
- PP-物料清单用户处理手册
1 系统操作时间 1. 新旧物料的替换需有BOM的产生2. BOM中组件发生变化时需有BOM的更改2 系统操作权限角色编码 角色名称Z:PP_PS_007_1000_200 PP主数据维护员 3 适应 ...
- loadrunner 基础-学习笔记一
由于公司要使用loadrunner暂停学习jmeter 1 loadrunner组件: virtual user generator:录制最终用户业务流程并创建自动化性能测试脚本,vuser脚本 co ...
- SQL Server 常用函数使用方法(持续更新)
之前就想要把一些 SQL 的常用函数记录下来,不过一直没有实行...嘿嘿... 直到今天用到substring()这个函数,C# 里面这个方法起始值是 0,而 SQL 里面起始值是 1.傻傻分不清楚. ...
- day30 hashlib模块
hashlib 提供摘要算法 最常见的就是MD5,当然一般来说MD5已经被足够了 不管算法多不一样,但是摘要的功能是不变的 对于相同的字符串进行摘要,使用同一个算法得到的值总是不变的 不同算法的话,会 ...
- source、sh、bash
source.sh.bash../ 执行脚本的区别 1.source命令用法: source FileName 作用:在当前bash环境下读取并执行FileName中的命令.该filename文件可以 ...