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 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
随机推荐
- 拾遗：Unix 守护进程编写规范
//标准库自带函数,通常以 daemon(0, 0) 方式调用 int daemon(int nochdir, int noclose) Linux: #include <unistd.h> ...
- 20130317 如何批量把文件名称写入txt文档
1.如何批量把文件名称写入txt文档 COMMAND 窗口例:存放图片的文件夹是 D:\123\就用下面一名命令就OKdir d:\123\*.jpg /b > A.TXT 那么你所以JPG格式 ...
- NodeJS学习笔记之Connect中间件应用实例
一,开篇分析 大家好哦,大熊君又来了,昨天因为有点个人的事没有写博客,今天又出来了一篇,这篇主要是写一个记事本的小应用,前面的文章, 我也介绍过“Connect”中间件的使用以及“Mongodb”的用 ...
- NuGet包介绍
Antlr 各种语言的语法识别器.解析器.编译和翻译器 Microsoft.AspNet.Web.Optimization 绑定优化CSS和JavaScript文件,也就是App_Start下的Bun ...
- Java创建List、Map等集合对象的同时进行赋值操作
title: Java创建List.Map等集合对象的同时进行赋值操作 date: 2019-11-28 23:25:47 tags: JavaSE categories: JavaSE 问题简介 ...
- php 三种文件下载的实现
第一种:直接添加文件下载的绝对路径连接 //如:我有一个文件在demo.xx.cn/demo.zip <button> <a href = "http://demo.xx. ...
- python 随便笔记
1 判断字符串中是否有数字 i.isdigit()==True else False #判断是否是数字i.isalpha()==True else False #判断是否是字母 i.isspace() ...
- 概率dp——hdu4089推公式+循环迭代
迭代是化简公式的常用技巧 dp[i][j]表示队伍中有i人,tomato排在第j位出现情况2的概率,那么先推出公式再进行简化 dp[i][1]=p21*dp[i][i] + p41 j<=k : ...
- type元类创建类的方法
一.代码 class_name='car' dict_name={} bases=(object,) class_body=''' def __init__(self,name): self.name ...
- try-catch 捕捉不到异常
code: int _tmain(int argc, _TCHAR* argv[]) { cout << "In main." << endl; //定义 ...