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 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
随机推荐
- sql2000行转列 转过来的测试完也不知那个网站去哪了 没法写出处了
ALTER procedure dbo.CommonRowToCol ) as begin --必须包含colname列和result列(不区分大小写), --除colname列和result列 其余 ...
- Pathfinding 模板题 /// BFS oj21413
题目大意: Description Bessie is stranded on a deserted arctic island and wants to determine all the path ...
- UVA Ananagrams /// map set
https://vjudge.net/problem/UVA-156 题目大意: 输入文本,找出所有满足条件的单词——该单词不能通过字母重排而得到输入的文本中的另外一个单词. 在判断是否满足条件时,字 ...
- asp.net core2.0 依赖注入 AddTransient与AddScoped的区别 - 晓剑 - CSDN博客
原文:asp.net core2.0 依赖注入 AddTransient与AddScoped的区别 - 晓剑 - CSDN博客 原文地址:http://www.tnblog.net/aojiancc2 ...
- 随笔记录 MBR扇区故障系统备份与还原 2019.8.7
系统备份: [root@localhost ~]# mkdir /abc [root@localhost ~]# mount /dev/sdb1 /abc [root@localhost ~]# dd ...
- ReentrantLock中的公平锁与非公平锁
简介 ReentrantLock是一种可重入锁,可以等同于synchronized的使用,但是比synchronized更加的强大.灵活. 一个可重入的排他锁,它具有与使用 synchronized ...
- nginx反向代理时有无”/”的辨析
nginx反向代理是日常使用nginx时最常用到的功能之一.在配置url的过程中,“/”的有无经常是影响我们配置成功的关键,也是困扰我们的问题所在.在此,结合实际例子,作简要辨析. 场景一:利用根目录 ...
- thinkphp 控制器定义
控制器和操作 一般来说,ThinkPHP的控制器是一个类,而操作则是控制器类的一个公共方法. 下面就是一个典型的控制器类的定义: <?php namespace Home\Controller; ...
- csps模拟87888990部分题解
题面:https://www.cnblogs.com/Juve/articles/11752338.html https://www.cnblogs.com/Juve/articles/1175241 ...
- 微信小程序——单选项
对于小程序单选,官方文档已经贴出了代码,我这里也不做过多解释,只是分享给大家一个小功能 一般在单选或者多选时,都会出现“其他”这个选项,如果通过input焦点事件.失焦事件来控制,代码会很繁琐 这里可 ...