canvas 画钟表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background: #000;
}
#c1 {
background: #fff;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -200px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oC = document.getElementById('c1');
var oGc = oC.getContext('2d');
// alert(oGc)
function toDraw() {
var x = 200;
var y = 200;
//中心点
var r = 150;
//半径
oGc.clearRect(0, 0, oC.width, oC.height)
// 获取时间
var oDate = new Date();
var oHoure = oDate.getHours();
var oMin = oDate.getMinutes();
var oSon = oDate.getSeconds();
//时针对应的弧度
var oHoureValue = (-90 + oHoure * 30 + oMin / 2) * Math.PI / 180;
//分针对应的弧度
var oMinValue = (-90 + oMin * 6) * Math.PI / 180;
//秒针对应的弧度
var oSonValue = (-90 + oSon * 6) * Math.PI / 180;
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, false)
}
oGc.closePath();
oGc.stroke();
//画白色的覆盖
oGc.fillStyle = "white";
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 19 / 20, 0, 360 * Math.PI / 180, false)
oGc.closePath();
oGc.fill();
oGc.lineWidth = 3;
oGc.beginPath();
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, false)
}
oGc.closePath();
oGc.stroke();
//画白色的覆盖
oGc.fillStyle = "white";
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 18 / 20, 0, 360 * Math.PI / 180, false)
oGc.closePath();
oGc.fill();
//时针
oGc.lineWidth = 5;
//分割单独的区间
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 10 / 20, oHoureValue, oHoureValue, false)
oGc.closePath();
oGc.stroke();
//分针
oGc.lineWidth = 3;
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 14 / 20, oMinValue, oMinValue, false)
oGc.closePath();
oGc.stroke();
//秒针
oGc.lineWidth = 2;
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 19 / 20, oSonValue, oSonValue, false)
oGc.closePath();
oGc.stroke();
}
setInterval(toDraw, 1000)
toDraw();
}
</script>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
问题:在实现 时针 分针 秒针都需要分离单独的空间 ,在开启定时器时注意要清空画布("会累加"),注意角度 ,弧度之间的转化
canvas 画钟表的更多相关文章
- HTML5 Canvas 画钟表
画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
- canvas画画板,canvas画五角星,canvas制作钟表、Konva写钟表
制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...
- 基础canvas应用-钟表绘制
首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...
- Canvas基础——钟表绘制
首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
随机推荐
- 为什么大多数培训机构还停留在只教ssh框架?
最近听一些朋友说,招聘面试的很多人简历都差不多,大部分人的简历上面都写了熟悉ssh框架,我朋友就在吐槽,为什么这些人简历都差不多,并且都熟悉ssh框架? 后面他说, 可能这些人都是培训机构出来的, 然 ...
- 局域网内补丁更新80072EE2错误
在公网中,80072ee2通常是在进行自动更新时遇到的连接性错误.通常由于三防杀毒软件或者浏览器,代理服务器设置不正确而导致的.那么如果是在局域网中遇到该问题,该如何解决呢? 错误截图: 1.首先确认 ...
- Angularjs快速入门(一)
这系列是看<用angularjs开发下一代web应用>的笔记. angular也接触几个月,总觉得不甚明白,写起来总是不那么如意.希望这本书看完了可以改变现在的状况.好了废话不多说开始: ...
- Hadoop集群
你可以用以下三种支持的模式中的一种启动Hadoop集群: 单机模式 伪分布式模式 完全分布式模式 单机模式的操作方法 默认情况下,Hadoop被配置成以非分布式模式运行的一个独立Java进程.这对调试 ...
- POJ1006: 中国剩余定理的完美演绎(非原创)
问题描述 人自出生起就有体力,情感和智力三个生理周期,分别为23,28和33天.一个周期内有一天为峰值,在这一天,人在对应的方面(体力,情感或智力)表现最好.通常这三个周期的峰值不会是同一天.现在给出 ...
- 实现javascript下的模块组织
前面的话 java有类文件.Python有import关键词.Ruby有require关键词.C#有using关键词.PHP有include和require.CSS有@import关键词,但是对ES5 ...
- 使用WebGL加载Google街景图
我们要实现的功能比较简单:首先通过坐标定位.我的位置.地址搜索等方式,调用google map api获取地址信息.然后根据地址信息中的全景信息获取当前缩放级别的全景信息.最终把这些全景信息通过Web ...
- [刷题]算法竞赛入门经典(第2版) 6-6/UVa12166 - Equilibrium Mobile
题意:二叉树代表使得平衡天平,修改最少值使之平衡. 代码:(Accepted,0.030s) //UVa12166 - Equilibrium Mobile //Accepted 0.030s //# ...
- Nginx安装lua支持
Nginx安装lua支持 需要LuaJIT-2.0.4.tar.gz,ngx_devel_kit,lua-nginx-module 1.下载安装LuaJIT-2.0.4.tar.gz wget -c ...
- NIO Socket编程实例
1.阻塞模式实例 NIOUtil类,用来通过SOcket获取BufferedReader和PrintWriter. package IO; import java.io.BufferedReader; ...