canvas石英钟
canvas石英钟:demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>石英钟</title>
<style>.clock {
text-align: center;
padding: 20%
}</style>
</head>
<body>
<div class="clock">
<canvas id="clock"></canvas>
</div>
<script type="text/javascript">
var CLOCK = {
'ctx': '', //canvas Object
'ctxw': '',//canvas宽度
'ctxh': '', // canvas高度
'r': '', //钟表的半径
hours: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2], //时刻
//初始化
inits: function () {
var self = this; // 保存this
self.ctx = document.getElementById('clock').getContext('2d');//方法返回一个用于在画布上绘图的环境
self.ctxw = self.ctx.canvas.width = 200;//设置width
self.r = self.ctxw / 2; //获取半径
self.ctxh = self.ctx.canvas.height = 200;//设置高度
// 周期性定时器 时间走起来
setInterval(function () {
self.timeRunning();
}, 1000);
},
//时间函数
timeRunning: function () {
var self = this,
ctx = self.ctx,
ctxw = self.ctxw,
ctxh = self.ctxh;
ctx.clearRect(0, 0, ctxw, ctxh); //在给定的矩形内清除指定的像素
var now = new Date(); //当前时间
var hour = now.getHours(); //获取时
var minute = now.getMinutes(); //获取分
var second = now.getSeconds(); //获取秒
self.clockDial();
self.clockHours();
self.clockwise(hour, minute);
self.minuteHand(minute, second);
self.secondHand(second);
self.circlePoint();
ctx.restore();//返回之前保存过的路径状态和属性
},
//定义表盘
clockDial: function () {
var self = this,
ctx = self.ctx,
circle = {
'lineWidth': 10, //线宽
'font': '18px Arial', // 文本样式
'textAlign': 'center', // 水平居中
'textBaseline': 'middle' //垂直居中
};
ctx.beginPath();//定义当前路径
ctx.lineWidth = circle.lineWidth;
ctx.font = circle.font;
ctx.textAlign = circle.textAlign;
ctx.textBaseline = circle.textBaseline;
//圆的参数
// arc（x,y,半径,起点，终点，顺时针默认false）
ctx.arc(self.r, self.r, self.r - 5, 0, 2 * Math.PI, false);
//绘制已定义的路径
ctx.stroke();
},
//定义时刻、每一个刻度和圆心点
clockHours: function () {
var self = this,
hours = self.hours,
r = self.r,
ctx = self.ctx,
ctxw = self.ctxw,
ctxh = self.ctxh,
now = new Date(),
yymmdd, //年月日
mm; //月份
/*
* hours.forEach(function (val数组元素, idx元素的索引, arr数组本身) {})
* 圆上每个点坐标（x,y）:
* x = r + Math.sin(2*Math.PI / 360) * (r - offset) // offset 偏移量
* y = r + Math.cos(2*Math.PI / 360) * (r - offset)
*/
//时刻
hours.forEach(function (val, idx) {
var radian = 2 * Math.PI / 12 * idx;
var x = r + Math.cos(radian) * (r - 30);
var y = r + Math.sin(radian) * (r - 30);
ctx.fillStyle = '#000'; //设置或返回用于填充绘画的颜色、渐变或模式
ctx.fillText(val, x, y); //在画布上绘制“被填充的”文本
});
/*
* 每一个刻度
*/
for (var i = 0, len = 60; i < len; i++) {
var radian = 2 * Math.PI / len * i;
var x = r + Math.cos(radian) * (r - 18);
var y = r + Math.sin(radian) * (r - 18);
ctx.beginPath();
if (i % 5 == 0) { //模除于5等于0
ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
ctx.fillStyle = '#000'
} else {
ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
ctx.fillStyle = '#999'
}
ctx.fill();//填充当前绘图（路径
}
//定义日期
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeRect(ctxw * 0.3, ctxw * 0.62, ctxw * 0.4, 20); //绘制矩形（无填充）
ctx.beginPath();
mm = now.getMonth() + 1;
mm = mm > 10 ? mm : '0' + mm;
yymmdd = now.getFullYear() + '-' + mm + '-' + now.getDate();
ctx.font = '14px Arial';//字体样式
ctx.fillStyle = '#000';
ctx.fillText(yymmdd, ctxw / 2, ctxw * 2 / 3);
},
//定义时针
clockwise: function (hours, minutes) {
var self = this,
r = self.r,
radian,
mradian,
ctxw = self.ctxw,
ctxh = self.ctxh,
ctx = self.ctx;
ctx.save();
ctx.beginPath();
radian = 2 * Math.PI / 12 * hours; // 每一个时刻的弧度 * 小时
mradian = 2 * Math.PI / 12 / 60 * minutes;// 每一分的弧度 * 分数
ctx.translate(r, r); // translate 改变坐标原点（x,y）.
ctx.rotate(radian + mradian);
ctx.lineWidth = 6;
ctx.moveTo(0, 10);//把路径移动到画布中的指定点，不创建线条
ctx.lineTo(0, -r / 2.5); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
ctx.stroke();
ctx.restore();
},
//定义分针
minuteHand: function (minutes, seconds) {
var self = this,
r = self.r,
radian,
sradian,
ctxw = self.ctxw,
ctxh = self.ctxh,
ctx = self.ctx;
ctx.save();
ctx.beginPath();
radian = 2 * Math.PI / 60 * minutes;
sradian = 2 * Math.PI / 60 / 60 * seconds;// 每一秒的弧度 * 秒数
ctx.translate(r, r);
ctx.rotate(radian + sradian);
ctx.lineWidth = 4;
ctx.moveTo(0, 15);
ctx.lineTo(0, -r / 2);
ctx.stroke();
ctx.restore();
},
//定义秒针
secondHand: function (seconds) {
var self = this,
r = self.r,
radian,
sradian,
ctxw = self.ctxw,
ctxh = self.ctxh,
ctx = self.ctx;
console.log(seconds);
ctx.save();
ctx.beginPath();
radian = 2 * Math.PI / 60 * seconds;
ctx.translate(r, r);
ctx.rotate(radian);
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.moveTo(-2, 20);
ctx.lineTo(2, 20);
ctx.lineTo(1, -r + 18);
ctx.lineTo(-1, -r + 18);
ctx.fillStyle = '#c14543';
ctx.fill();
ctx.restore();
},
circlePoint: function () {
var self = this,
r = self.r,
ctx = self.ctx;
//圆心
ctx.beginPath();
ctx.arc(r, r, 2, 0, 2 * Math.PI, false);
ctx.fillStyle = '#FFFFFF';
ctx.fill();
}
};
CLOCK.inits();
</script>
</body>
</html>
canvas石英钟的更多相关文章
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
- 使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
随机推荐
- 03root密码设置
- 23种常用设计模式的UML类图
23种常用设计模式的UML类图 本文UML类图参考<Head First 设计模式>(源码)与<设计模式:可复用面向对象软件的基础>(源码)两书中介绍的设计模式与UML图. 整 ...
- vagrant centos lamp小记
更新包 sudo yum -y update vagrant centos 默认语言好像是德语,看不懂,需要更换为 en_US [vagrant@localhost ~]$ locale LANG=d ...
- not registered via @EnableConfigurationProperties or marked as Spring component
利用@ConfigurationProperties(prefix = "")来绑定属性时报错: not registered via @EnableConfigurationPr ...
- Java基本语法.part02
变量 变量的概念: 内存中的一个存储区域 该区域有自己的名称(变量名)和类型(数据类型) Java中每个变量必须先声明,后使用 该区域的数据可以在同一类型范围内不断变化 使用变量注意: 变量的作用域: ...
- thinkphp 输入变量
在Web开发过程中,我们经常需要获取系统变量或者用户提交的数据,这些变量数据错综复杂,而且一不小心就容易引起安全隐患,但是如果利用好ThinkPHP提供的变量获取功能,就可以轻松的获取和驾驭变量了. ...
- QQ聊天机器人 Delphi代码
QQ聊天机器人 前几日,看到杂志上有一篇关于开发QQ聊天机器人的文章.谈到了对QQ循环发送消息内容,感觉倒也很好玩,于是拿起Delphi开始了我的QQ聊天机器人之路. 首先要明白自己要做什么, ...
- CF459E Pashmak and Graph (Dag dp)
传送门 解题思路 \(dag\)上\(dp\),首先要按照边权排序,然后图都不用建直接\(dp\)就行了.注意边权相等的要一起处理,具体来讲就是要开一个辅助数组\(g[i]\),来避免同层转移. 代码 ...
- mysql中的字符串截取和替换
-- 替换 replace(字段名,"需要替换的字符","替换的字符") mysql里replace不支持正则匹配 mysql> set @needRep ...
- JDK9新特性实战：简化流关闭新姿势。
做Java开发的都知道,每个资源的打开都需要对应的关闭操作,不然就会使资源一直占用而造成资源浪费,从而降低系统性能. 关于资源的关闭操作,从JDK7-JDK9有了不少的提升及简化. JDK6 在JDK ...