1、最终效果 时钟、分钟、秒指针连续移动2、完整代码
2、完整代码<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clock in canvas</title>
<script type="text/javascript" charset="utf-8" src="Scripts/Jquery/jquery-1.9.1.min.js"></script>
<script>
$(function () {
var container = $(‘.container‘);
var clockPanel = $(‘.clockPanel‘, container).get(0);
var ctx = clockPanel.getContext(‘2d‘);
var r = 100;
var point = { X: 150, Y: 150 };
drawCircle(ctx, point, r);
var clockPointer = $(‘.clockPointer‘, container).get(0);
var ctxPointer = clockPointer.getContext(‘2d‘);
var run = function () {
drawPointer(ctxPointer, point, r, new Date());
requestAnimFrame(run);
}
run();
})
function drawCircle(ctx, point, r) {
ctx.beginPath();
ctx.arc(point.X, point.Y, r, 0, Math.PI * 2, true);
ctx.stroke();
ctx.beginPath();
ctx.arc(point.X, point.Y, 4, 0, Math.PI * 2, true);
ctx.fillStyle = "#ccc";
ctx.fill();
ctx.closePath();
for (var i = 0; i < 60; i++) {
drawScale(ctx, point, r, 5, i);
}
}
function drawScale(ctx, point, r, len, scale) {
var angle = 360 * scale / 60 * 2 * Math.PI / 360
if (scale % 5 == 0) {
len = len + 3
ctx.lineWidth = 3;
}
else {
ctx.lineWidth = 1;
}
var sX = point.X - (r - len) * Math.sin(angle);
var sY = point.Y - (r - len) * Math.cos(angle);
var eX = point.X - r * Math.sin(angle);
var eY = point.Y - r * Math.cos(angle);
ctx.beginPath();
ctx.strokeStyle = "#ccc";
ctx.moveTo(sX, sY);
ctx.lineTo(eX, eY);
ctx.stroke();
ctx.closePath();
}
function drawPointer(ctx, point, r, time) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
var minSec = time.getMilliseconds();
var angleS = 2 * Math.PI * (60 * 1000 - seconds * 1000 - minSec) / (60 * 1000);
var esX = point.X - (r - 5) * Math.sin(angleS);
var esY = point.Y - (r - 5) * Math.cos(angleS);
var eSec = { X: esX, Y: esY };
drawLine(ctx, point, eSec, 1);
var angleM = 2 * Math.PI * (60 * 60 - minutes * 60 - seconds) / (60 * 60);
var emX = point.X - (r - 10) * Math.sin(angleM);
var emY = point.Y - (r - 10) * Math.cos(angleM);
var eMinu = { X: emX, Y: emY };
drawLine(ctx, point, eMinu, 2);
var angleH = 2 * Math.PI * ((24 * 60 * 60 - hours * 60 * 60 - minutes * 60 - seconds) % (12 * 60 * 60)) / (12 * 60 * 60);
var ehX = point.X - (r - 15) * Math.sin(angleH);
var ehY = point.Y - (r - 15) * Math.cos(angleH);
var eHour = { X: ehX, Y: ehY };
drawLine(ctx, point, eHour, 3);
}
function drawLine(ctx, pointS, pointE, lineWidth) {
ctx.lineWidth = lineWidth;
ctx.beginPath();
ctx.strokeStyle = "#808080";
ctx.moveTo(pointS.X, pointS.Y);
ctx.lineTo(pointE.X, pointE.Y);
ctx.stroke();
ctx.closePath();
}
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (run) {
window.setTimeout(run, 16);
};
})();
</script>
<style>
.container {
width: 300px;
height: 300px;
/*background: orange;*/
margin: 0 auto;
position: relative;
}
canvas {
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<canvas class="clockPanel" height="300" width="300"></canvas>
<canvas class="clockPointer" height="300" width="300"></canvas>
</div>
</body>
</html>
3、实现重点
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (run) {
window.setTimeout(run, 16);
};
})();
时间： 2024-10-04 16:41:02