canvas 动画 时钟clock
<canvas id="clock" width="500" height="500"></canvas>
function drawClock(){
var canvas = document.querySelector("#clock");
var ctx = canvas.getContext("2d");
drawDial(ctx); //绘制变盘
// 绘制时针、分针、秒针
var pi = Math.PI;
var time = new Date();
var s = time.getSeconds();
var m = time.getMinutes();
var h = time.getHours();
var angleSecound = s*pi/30;
var angleMinute = m*pi/30 + angleSecound/60;
var angleHour = h*pi/6 + angleMinute/12; drawHand(angleSecound,190,2,"blue",ctx);
drawHand(angleMinute,150,4,"green",ctx);
drawHand(angleHour,80,6,"red",ctx); requestAnimationFrame(drawClock); }
function drawHand(angle,length,width,color,ctx){
var pi = Math.PI;
ctx.save();
ctx.translate(250,250);
ctx.rotate(-pi/2 + angle);
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(-4,0);
ctx.lineTo(length,0);
ctx.lineWidth = width;
ctx.strokeStyle = color;
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function drawDial(ctx){
var pi = Math.PI;
ctx.clearRect(0,0,500,500);
ctx.save(); //绘制外周圆弧
ctx.translate(250,250);
ctx.strokeStyle="gray";
ctx.beginPath();
ctx.arc(0,0,200,0,2*pi);
ctx.stroke();
ctx.closePath(); //绘制刻度
for(var i=0;i<60;i++){
ctx.save();
ctx.rotate(-pi/2 + i*pi/30);
ctx.beginPath();
ctx.moveTo(180,0);
ctx.lineTo(195,0);
ctx.strokeStyle = i%5 ? "blue":"red";
ctx.lineWidth = i%5 ? "2":"4";
ctx.stroke();
ctx.closePath();
ctx.restore();
}
ctx.restore();
}
drawClock();
截图:
canvas 动画 时钟clock的更多相关文章
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- 使用canvas绘制时钟
使用canvas绘制时钟 什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
- [ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
- html5学习(一)--canvas画时钟
利用空余时间学习一下html5. <!doctype html> <html> <head></head> <body> <canva ...
- canvas粒子时钟
前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...
- canvas画时钟,重拾乐趣!
canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- canvas实现时钟
最近在看新浪体育网球频道(http://sports.sina.com.cn/tennis/)的时候,看到了下面的劳力士广告的时钟是用canvas做的,于是也实现了一个简单的canvas时钟.直接上代 ...
随机推荐
- odps 使用参考 & tips
1. 自定义udf 编写udf 1)pom.xml <dependency> <groupId>com.aliyun.odps</groupId> <art ...
- 国内好的python学习地址
python3官方在线文档https://docs.python.org/3/ 玩蛇网http://www.iplaypy.com/ python中文网 http://bbs.pythontab.co ...
- defaultdict
原作者: Jason Kirtland 日期: January 13th, 2009 许可证: Creative Commons Attribution-Share Alike 3.0 原文链接(PP ...
- maven项目里的mapper不被加载,解析
出现这个错误是因为maven加载配置文件是从resource里加载的,所以要配置一下
- poi excel 合并单元格
结论:final CellRangeAddress cra = new CellRangeAddress(rowId, rowId + rowSkip, colId, colId + c ...
- 05.linux目录结构
bin 存放二进制可执行文件(ls,cat,mkdir等) boot 存放用于系统引导时使用的各种文件 dev 用于存放设备文件 etc 存放系统配置文件 home 存放所有 ...
- nginx配置资源缓存
缓存nginx服务器的静态文件.如css,js,htm,html,jpg,gif,png,flv,swf,这些文件都不是经常更新.便于缓存以减轻服务器的压力. 打开配置文件/usr/local/ngi ...
- delphi 调用 c++builder
delphi 调用 c++builder c++builder 调用delphi 混合调用,mix https://community.embarcadero.com/blogs/entry/mixi ...
- 前后台交互实现点击超链接通过指定的 url 去网络或者文件服务器下载文件
前台 VUE 界面: <el-table-column prop="attachment" align="center" label="附件详情 ...
- confusing c++ 重写 与 重定义 记录1
class parent { public: void f() { cout << "parent f()" << endl; } void f(int i ...