canvas画的时钟
结合几天来学习的canvas的API，终于完成了一个时钟呵呵
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style type="text/css">
canvas { border: 1px solid black; }
#change{width:200px; line-height:30px; color:#fff; text-align:center; background:blue;}
</style>
<script src="canvas.js" type="text/javascript" charset="utf-8"></script>
</head> <body>
<canvas id="canvas" width="600" height="400">current stock price: $3.15 +0.15</canvas> </html>
js
window.onload = function() {
new clock();
}
function clock() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 300, 300);
var date = new Date(); //获取当前时间
this.hour = date.getHours();
this.min = date.getMinutes();
this.sec = date.getSeconds();
this.hour = this.hour + this.min / 60;
this.hour = this.hour > 12 ? this.hour - 12 : this.hour;
this.radius = 115;
this.dotX = 150;
this.dotY = 150;
this.maxBorderWidth = 8;
this.minBorderWidth = 2;
this.clockBg();
this.drawHour();
this.drawMin();
this.drawSec();
this.onreset();
}
clock.prototype.onreset = function() {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 300, 300);
var date = new Date(); //获取当前时间
this.hour = date.getHours();
this.min = date.getMinutes();
this.sec = date.getSeconds();
this.hour = this.hour + this.min / 60;
this.hour = this.hour > 12 ? this.hour - 12 : this.hour;
this.clockBg();
this.drawHour();
this.drawMin();
this.drawSec();
var self = this;
setInterval(function() {
self.onreset();
}, 1000);
}
clock.prototype.clockBg = function() {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "#e3e3e3";
ctx.arc(this.dotX, this.dotY, this.radius, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
for (var i = 0; i < 60; i++) {
ctx.save();
var pointLong;
if (i % 5 == 0) {
ctx.lineWidth = this.maxBorderWidth;
pointLong = 25;
} else {
ctx.lineWidth = this.minBorderWidth;
pointLong = 12;
}
ctx.strokeStyle = "#000";
ctx.translate(this.dotX, this.dotY);
ctx.rotate(i * 6 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -this.radius + this.maxBorderWidth);
ctx.lineTo(0, -this.radius + this.maxBorderWidth + pointLong);
ctx.closePath();
ctx.stroke();
ctx.restore();
};
}
clock.prototype.drawHour = function() {
var ctx = canvas.getContext('2d');
ctx.save();
ctx.strokeStyle = "#000";
ctx.lineWidth = this.maxBorderWidth;
ctx.translate(this.dotX, this.dotY);
ctx.rotate(this.hour * 30 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, 20);
ctx.lineTo(0, -70);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
clock.prototype.drawMin = function () {
var ctx = canvas.getContext('2d');
ctx.save();
ctx.strokeStyle = "#00";
ctx.lineWidth = this.maxBorderWidth;
ctx.translate(this.dotX, this.dotY);
ctx.rotate(this.min*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0, 20);
ctx.lineTo(0, -80);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
clock.prototype.drawSec = function() {
var ctx = canvas.getContext('2d');
ctx.save();
ctx.strokeStyle = "#f00";
ctx.lineWidth = this.minBorderWidth;
ctx.translate(this.dotX, this.dotY);
ctx.rotate(this.sec * 6 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, 20);
ctx.lineTo(0, -100);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "#f00";
ctx.arc(0, 0, 5, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.fill();
ctx.restore();
}
function drawTime() {
var clock = document.getElementById('canvas');
var ctx = clock.getContext('2d');
ctx.clearRect(0, 0, 244, 300);
var date = new Date(); //获取当前时间
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
hour = hour + min / 60;
hour = hour > 12 ? hour - 12 : hour;
var width = 244;
var height = 280;
var dot = { //时钟中心
x: width / 2,
y: width / 2,
radius: 4
}
var radius = 115;
var maxBorderWidth = 8;
var minBorderWidth = 2;
//绘制时钟中心点
ctx.lineWidth = maxBorderWidth;
ctx.beginPath();
ctx.fillStyle = "#e2e2e2";
ctx.arc(dot.x, dot.y, radius, 0, 2 * Math.PI, true);
ctx.fill();
ctx.closePath();
//绘制时刻度、分刻度
for (var i = 0; i < 60; i++) {
ctx.save();
var pointLong;
if (i % 5 == 0) {
ctx.lineWidth = maxBorderWidth;
pointLong = 25;
} else {
ctx.lineWidth = minBorderWidth;
pointLong = 12;
}
ctx.strokeStyle = "#000";
ctx.translate(dot.x, dot.y);
ctx.rotate(i * 6 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -radius + maxBorderWidth);
ctx.lineTo(0, -radius + maxBorderWidth + pointLong);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
//绘制时针
ctx.save();
ctx.lineWidth = maxBorderWidth;
ctx.translate(dot.x, dot.y);
ctx.rotate(hour * 30 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -55);
ctx.lineTo(0, 25);
ctx.closePath();
ctx.stroke();
ctx.restore();
//绘制分针
ctx.save();
ctx.lineWidth = maxBorderWidth;
ctx.translate(dot.x, dot.y);
ctx.rotate(min * 6 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -97);
ctx.lineTo(0, 25);
ctx.closePath();
ctx.stroke();
ctx.restore();
//绘制秒针
ctx.save();
ctx.strokeStyle = "red";
ctx.lineWidth = minBorderWidth;
ctx.translate(dot.x, dot.y);
ctx.rotate(sec * 6 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -75);
ctx.lineTo(0, 25);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = '#D6231C';
ctx.arc(0, -75, 6, 0, 2 * Math.PI, true); //绘制秒针针尖的小圆点
ctx.fill();
ctx.closePath();
ctx.restore();
//装饰时钟中心 两个小圆叠加
ctx.beginPath();
ctx.fillStyle = '#982127';
ctx.arc(dot.x, dot.y, dot.radius, 0, 2 * Math.PI, true);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = '#D6231C';
ctx.arc(dot.x, dot.y, 2, 0, 2 * Math.PI, true);
ctx.fill();
ctx.closePath();
//再时钟上添加签名
ctx.fillStyle = "#000";
ctx.font = "15px Comic Sans MS";
ctx.fillText("Chal Mine", dot.x - 30, dot.y + 50);
}
canvas画的时钟的更多相关文章
- 深夜，用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...
- HTML5 Canvas画数字时钟
先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好
- canvas画一个时钟
效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 用canvas画一个时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 利用canvas画一个实时时钟
先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- H5 canvas圆形的时钟
今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...
- canvas实例_时钟
效果图:是一个会动的时钟 一.时钟的组成 1.表盘(蓝色) 2.刻度(黑色) 3.时针(黑色) 4.分针(黑色) 5.秒针(红色)需美化 二.主要应用的技术 Canvas画线 Canv ...
随机推荐
- Python数据分析--Pandas知识点(二)
本文主要是总结学习pandas过程中用到的函数和方法, 在此记录, 防止遗忘. Python数据分析--Pandas知识点(一) 下面将是在知识点一的基础上继续总结. 13. 简单计算 新建一个数据表 ...
- [BX]指令
mov ax,[bx] 功能:bx中存放的数据作为一个偏移地址EA,段地址SA默认在ds中,将SA:EA处的数据送入ax中.即(ax)=((ds)*16+(bx)). mov [bx],ax 功能:b ...
- 百度地图插件（百度地图AK申请配置指南）
百度地图AK申请配置指南 [LBS云] 百度地图AK申请配置指南 1. 该文档是详细版,图文并茂: 2. 该指南是针对browser-mobile-sever三种终端开发的申请与配置说明: 3 ...
- 搭建FTP服务器 window7
1.安装IIS组件,打开控制面板-->程序和功能,点击打开或关闭windows功能 找到Internet信息服务,勾选FTP服务器和Web管理工具下的IIS管理控制台进行安装ftp,如图所示 2 ...
- 体验godaddy域名转入，添加A记录，及使用dnspod的NS
有两个域名一直放在朋友那,这个朋友是个神人,经常换电话号码,联系非常不方便. 近日将域名转入到godaddy下面了,第一次做域名转移,很是好奇. 之前域名在21.cn注册的,朋友帮我申请域名转出后,2 ...
- BZOJ1051或洛谷2341 [HAOI2006]受欢迎的牛
BZOJ原题链接 洛谷原题链接 显然在一个强连通分量里的奶牛都可以相互喜欢,所以可以用\(tarjan\)求强连通并缩点. 要求明星奶牛必须被所有人喜欢,显然缩点后的图必须满足只有一个点没有出度,因为 ...
- BZOJ 1969 航线规划 - LCT 维护边双联通分量
Solution 实际上就是查询 $u$ 到 $v$ 路径上 边双的个数 $ -1$. 并且题目仅有删边, 那么就离线倒序添边. 维护 边双 略有不同: 首先需要一个并查集, 记录 边双内的点. 在 ...
- 使用Loadrunner对IBM MQ进行性能测试
一.概述 使用Loadrunner对IBM MQ进行性能测试,需要用到java vuser以及java编码知识.此次先介绍什么是IBM MQ,然后java vuser的使用与配置细节, ...
- 解决CentOS7-python-pip安装失败
Pip介绍 pip 是一个安装和管理 Python 包的工具,python安装包的工具有easy_install, setuptools, pip,distribute.使用这些工具都能下载并安装dj ...
- Laravel 利用 observer 类基于状态属性，对进行删除和修改的控制
1 我们知道 Observer 类可以监听模型类的相关事件 1.1 creating, created, updating, updated, saving, saved, deleting, del ...