深夜，用canvas画一个时钟
深夜，用canvas画一个时钟
这几天准备阿里巴巴的笔试，可以说已经是心力交瘁，自从阿里和蘑菇街的内推被刷掉之后，开始越来越怀疑起自己的能力来，虽然这点打击应该是微不足道的。毕竟校招在刚刚开始拉开帷幕，精彩的还在后头，内推不过，还有机会去秋招，这次秋招不过，还有明年的春招。但是明年的春招我可能等不起了，我迫不及待地需要一份工作，需要一份我向往的工作。
今天看书看到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>
