canvas制作表盘
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head> <body>
<canvas id="c1" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d'); function drawWatch(){
var x = 200,y = 200,r = 100;
//清除上次的画布 优化性能
oGC.clearRect(0,0,oC.width,oC.height);
//日期处理 时分秒
var dateT=new Date();
var hour=dateT.getHours();
var min=dateT.getMinutes();
var sec=dateT.getSeconds();
//转化为弧度
var hourValue=(hour*30-90+min/2)*Math.PI/180;
var minValue=(min*6-90)*Math.PI/180;
var secValue=(sec*6-90)*Math.PI/180; // 表盘--每6°的刻度线
oGC.beginPath();
for(var i = 0; i < 60; i++) {
oGC.moveTo(x, y);
oGC.arc(x, y, r, 6 * i * Math.PI / 180,
6 * (i + 1) * Math.PI / 180);
};
oGC.closePath();
oGC.stroke();
//覆盖 最外圈刻度线
oGC.fillStyle = "white";
oGC.beginPath();
oGC.moveTo(x, y);
oGC.arc(x, y, r*19/20, 0, 360, false);
oGC.fill();
oGC.closePath();
// oGC.stroke(); //时针刻度线
oGC.beginPath();
oGC.lineWidth = 3;
for(var i = 0; i < 12; i++) {
oGC.moveTo(x, y);
oGC.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180);
};
oGC.closePath();
oGC.stroke();
//覆盖 时针刻度线
oGC.beginPath();
oGC.strokeStyle="white";//边框
oGC.arc(x,y,r*18/20,0*Math.PI,2*Math.PI,false);
oGC.fillStyle="white";
oGC.fill();
oGC.closePath();
// oGC.stroke(); //shi针
oGC.lineWidth=5;
oGC.strokeStyle="red";
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*0.5,hourValue,hourValue,false);
oGC.closePath();
oGC.stroke();
// fen针
oGC.lineWidth=3;
oGC.strokeStyle="orange";
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*0.7,minValue,
minValue,false);
oGC.closePath();
oGC.stroke();
// 秒针
oGC.lineWidth=2;
oGC.strokeStyle="black";
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*0.9,secValue,
secValue,false);
oGC.closePath();
oGC.stroke();
}
drawWatch();
setInterval(drawWatch,1000);
</script> </html>
canvas制作表盘的更多相关文章
- 使用Canvas制作时钟动画
复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...
- canvas画画板,canvas画五角星,canvas制作钟表、Konva写钟表
制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...
- 用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
- 酷!使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- 使用canvas制作在线画板
canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...
- 怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
- 利用canvas制作乱跑的小球
canvas制作乱跑的小球 说明:将下面的代码放到html的body就可以,键盘控制上(W)下(S)左(A)右(D) <body> <canvas id="canvas&q ...
- H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
随机推荐
- 细说SVN集中式版本控制器
svn全称Subversion,实现多人开发同一个项目时,对源代码进行管理的工具.在公司里边,一个项目是由多人同时在开发,大家在本地自己电脑开发php代码,完毕后就commit上传给服务器运行. 如 ...
- Ansible Playbook 详解
一.playbook 的简单使用 1.创建文件实例 (1)编辑配置文件 [root@tiejiangSRC1 ~]# cd /etc/ansible/ [root@tiejiangSRC1 ansib ...
- Xcode的路径小知识纪录
Xcode的路径小知识纪录 模拟器应用程序的安装路径 /Users/aplle/资源库/Application Support/iPhone Simulator/7.1/Applications Xc ...
- [ERR] Node 192.168.25.135:7001 is not empty. Either the node already knows other nodes (check with CLUSTER NODES) or contains some key in database 0.
原文链接:https://www.cnblogs.com/huxinga/p/6644226.html 解决办法:将redis全部shutdown 将每个节点下aof.rdb.nodes.conf本地 ...
- will not be exported or published. Runtime ClassNotFoundExceptions may result.
在eclipse中加入某个jar包时,会出现Classpath entry XXX.jar will not be exported or published. Runtime ClassNotFou ...
- springBoot整合Quarzt2.3
首先,你要配置好springboot的配置(在resources下) 我把其改为application.yml # Tomcat server: tomcat: uri-encoding: UTF-8 ...
- How to install VCM 2 Ford IDS 109 software
How to install Ford IDS 109: 1- Install the ids 86 before changing the date to 1 07 2015 (hold the d ...
- RNA测序研究现状与发展
RNA测序研究现状与发展 1 2,584 A+ 所属分类:Transcriptomics 收 藏 通常来说,某一个物种体内所有细胞里含有的DNA都应该是一模一样的,只是因为每一种细胞里所表达的R ...
- POJ3662或洛谷1948 Telephone Lines
二分答案+单源最短路 POJ原题链接 洛谷原题链接 显然可以二分答案,检验\(mid\)可以使用最短路来解决. 将大于\(mid\)的边看成长度为\(1\)的边,说明要使用免费升级服务,否则长度为\( ...
- Spring 是如何解析泛型 - ResolvalbeType
Spring 是如何解析泛型 - ResolvalbeType Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Java ...