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 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
随机推荐
- tensorflow 训练的时候loss=nan
出现loss为nan 可能是使用了relu激活函数,导致的.因为在负半轴上输出都是0
- XStream入门应用程序
在进入XStream库的细节之前,让我们来看看应用程序操作.在这个例子中,我们创建Student和Address类.还将创建一个Student对象,然后将其序列化到一个XML字符串.然后反序列化的同一 ...
- Day 11:函数装饰器
在说装饰器前,先说一个东西,再Python里,有一个 一切皆对象,一切皆变量. 例: def hello(name="sunjinyao"): return "hi &q ...
- Markdown文档常用字体及颜色设置
1.字体.字号.颜色设置 <font face="微软雅黑" >微软雅黑字体</font> <font face="黑体" > ...
- python 19 lambda函数
转自http://www.cnblogs.com/BeginMan/p/3178103.html 一.lambda函数 1.lambda函数基础: lambda函数也叫匿名函数,即,函数没有具体的名称 ...
- 【收集+】DDR5 vs DDR4
Advantages of Migrating to DDR5 DDR5 is the next evolution in DRAM, bringing a robust list of new fe ...
- palindrome 回文 /// Manacher算法
判断最长不连续回文 #include <bits/stdc++.h> using namespace std; int main() { ]; while(gets(ch)) { ],an ...
- 在linux 或docker中使用 system.drawing.common
在dockerfile 中添加 FROM microsoft/dotnet:2.1-aspnetcore-runtime RUN apt-get update RUN apt-get install ...
- Redis本地集群搭建(5版本以上)
Redis本地集群搭建(5版本以上) 2019年11月3日10:05:48 步骤 1.下载安装Redis的安装包 2.复制5份,一共6份Redis的解压安装版,修改每个Redis节点的端口并开启节点 ...
- JS去重算法
1.遍历数组法 它是最简单的数组去重方法(indexOf方法) 实现思路:新建一个数组,遍历去要重的数组,当值不在新数组的时候(indexOf为-1)就加入该新数组中: var arr=[2,8,5, ...