深夜,用canvas画一个时钟
2015-08-18 20:54
176 查看
深夜,用canvas画一个时钟
查看demo这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的。毕竟校招在刚刚开始拉开帷幕,精彩的还在后头,内推不过,还有机会去秋招,这次秋招不过,还有明年的春招。但是明年的春招我可能等不起了,我迫不及待地需要一份工作,需要一份我向往的工作。
今天看书看到canvas部分,便用它来写了一个时钟,原理很简单,用
context.arc(100, 100, 99, 0, Math.PI*2, false);绘制圆形作为表盘,
context.fillText(i, textX, textY);绘制表盘上的数字,
context.lineTo(secondsX, secondsY);绘制秒针,时针和分针的原理与此相同。接着就是正弦和余弦函数的运用。
开代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas时钟</title> </head> <body> <canvas id="drawing" width="400" height="400"></canvas> <script> var draw = document.getElementById('drawing'); var time = null; var seconds = 0; var minutes = 0; var hours = 0; var secondsAngle = 0; var minutesAngle = 0; var hoursAngle = 0; var secondsX = 0; var secondsY = 0; var minutesX = 0; var minutesY = 0; var hoursX = 0; var hoursY = 0; if (draw.getContext) { var context = draw.getContext('2d'); // 绘制外圆 context.arc(100, 100, 99, 0, Math.PI*2, false); // 绘制内圆 context.moveTo(194, 100); context.arc(100, 100, 94, 0, Math.PI*2, false); context.stroke(); context.font = "bold 14px Arial"; context.textAlign = 'center'; context.textBaseline = 'middle'; // context.fillText('12', 100, 20); var i = 1; var textAngle = 0; var textX = 0; var textY = 0; for (i = 1; i < 13; i++) { textAngle = i * (Math.PI*2/12); textY = 100 - 83*Math.cos(textAngle); textX = 100 + 83*Math.sin(textAngle); context.fillText(i, textX, textY); } drawClock(); setInterval(drawClock, 1000); } function getTime() { var date = new Date(); var res = {}; res.seconds = date.getSeconds(); res.minutes = date.getMinutes(); res.hours = date.getHours(); return res; } function drawClock() { // 开始路径 context.beginPath(); context.clearRect(35, 35, 130, 130); time = getTime(); seconds = time.seconds; minutes = time.minutes; hours = time.hours > 12 ? time.hours-12: time.hours; // 绘制秒针 // context.rePaint(); context.moveTo(100, 100); secondsAngle = (seconds/60)*Math.PI*2; secondsY = 100 - 65*Math.cos(secondsAngle); secondsX = 100 + 65*Math.sin(secondsAngle); context.lineTo(secondsX, secondsY); // 绘制分针 context.moveTo(100, 100); minutesAngle = ((minutes*60+seconds)/(60*60))*Math.PI*2; minutesY = 100 - 50*Math.cos(minutesAngle); minutesX = 100 + 50*Math.sin(minutesAngle); context.lineTo(minutesX, minutesY); // 绘制时针 context.moveTo(100, 100); hoursAngle = ((hours*60*60+minutes*60+seconds)/(12*60*60))*Math.PI*2; hoursY = 100 - 35*Math.cos(hoursAngle); hoursX = 100 + 35*Math.sin(hoursAngle); context.lineTo(hoursX, hoursY); // 描边路径 context.stroke(); } </script> </body> </html>
相关文章推荐
- CODEVS 1073 家族
- AreYouBusy
- office 2016 64位 安装、激活教程
- 软件定义闪存系统是什么?
- 软件定义闪存系统是什么?
- 浅谈Java工厂模式
- C++中数据类型的字节数
- Poj 1006 Biorhythms
- 最短路径问题 HDU杭电3790 【Dijkstra算法】
- android的布局
- 在Activity中得到新打开Activity 关闭后返回的数据
- java贪吃蛇
- poj 2528(区间修改+离散化)
- HDU-5402 Travelling Salesman Problem(模拟)
- VIM命令集合
- Java出局游戏
- Java反射
- Executor
- [Java]LeetCode57 Insert Interval
- 【solr这四个主题】大约VelocityResponseWriter