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 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
随机推荐
- 案例 查询QC（query_cache）
案例: 数据库版本 5.7.23 16c 64g 按月分区表,做压力测试 开启QC之前: select * from a where aa=xxx; QPS:每秒处理查询的数量 3000+ 开启之后 ...
- linux mysql 远程访问权限问题
1.为了让访问mysql的客户端的用户有访问权限,我们可以通过如下方式为用户进行授权:mysql> grant all on *.* to user_name@'%' identified by ...
- 8张图带你轻松温习Java知识
年初四好,一图胜千言,下面图解均来自Program Creek 网站,目前它们拥有最多的票选. 如果图解没有阐明问题,那么你可以借助它的标题来一窥究竟. 1 字符串不变性 下面这张图展示了这段代码做了 ...
- Python匹马行天下之运算符
什么事运算符? 本章节主要说明Python的运算符.举个简单的例子 4 +5 = 9 . 例子中,4 和 5 被称为操作数,"+" 称为运算符. Python语言支持以下类型的运算 ...
- Spring MVC入门示例（1）
1.新建一个Java Web项目 2.导入jar包 3.在WEB-INF下面建一个hello.jsp页面. 1 <%@ page language="java" import ...
- JS对象 substring() 方法用于提取字符串中介于两个指定下标之间的字符。
提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符. 语法: stringObject.substring(starPos,stopPos) 参 ...
- 7python ruturn中的and与or.
def test(): a = "" return a or "hehe" #如果a为真,输出a; 否则输出右边(比如0, "", [], ...
- 蛮好用的Gungho重点工作督查督办跟踪管理系统
重点工作督查督办跟踪管理系统可以实现: 为了确保上级重要决定.指示和本单位重大目标和工作部署及时落到实处,确定实效,提升办事效率. 重点工作督查督办事项包括: 1)上级单位或领导的批示指示: 2)公司 ...
- 用while实现登录操作(3次过后，输入yes,使counter置0,还可以玩)
用while实现登录操作(输入yes,使counter置0,还可以玩)#_author:Administrator#date:2019/10/24user_name="star"p ...
- 0704 Process继承实现多进程、Pool进程池，进程间通过队列通信，Pool实现多进程实现复制文件
通过继承的方式,实现Process多进程 from multiprocessing import Process import time class MyNewProcess(Process): de ...