html 使用HTML5画布和JavaScript的简单模拟时钟。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用HTML5画布和JavaScript的简单模拟时钟。相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html>
<head>
<title>Analog Clock using Canvas</title>
</head>
<body>
<canvas id="canvas" width="400" height="400">
</canvas>
</body>
<script>
window.onload = function ()
{
setInterval(showClock, 1000);
function showClock()
{
// DEFINE CANVAS AND ITS CONTEXT.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var date = new Date;
var angle;
var secHandLength = 60;
// CLEAR EVERYTHING ON THE CANVAS. RE-DRAW NEW ELEMENTS EVERY SECOND.
ctx.clearRect(0, 0, canvas.width, canvas.height);
OUTER_DIAL1();
OUTER_DIAL2();
CENTER_DIAL();
MARK_THE_HOURS();
MARK_THE_SECONDS();
SHOW_SECONDS();
SHOW_MINUTES();
SHOW_HOURS();
function OUTER_DIAL1()
{
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, secHandLength + 10, 0, Math.PI * 2);
ctx.strokeStyle = '#92949C';
ctx.stroke();
}
function OUTER_DIAL2()
{
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, secHandLength + 7, 0, Math.PI * 2);
ctx.strokeStyle = '#929BAC';
ctx.stroke();
}
function CENTER_DIAL()
{
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 2, 0, Math.PI * 2);
ctx.lineWidth = 3;
ctx.fillStyle = '#353535';
ctx.strokeStyle = '#0C3D4A';
ctx.stroke();
}
function MARK_THE_HOURS()
{
for (var i = 0; i < 12; i++)
{
angle = (i - 3) * (Math.PI * 2) / 12; // THE ANGLE TO MARK.
ctx.lineWidth = 1; // HAND WIDTH.
ctx.beginPath();
var x1 = (canvas.width / 2) + Math.cos(angle) * (secHandLength);
var y1 = (canvas.height / 2) + Math.sin(angle) * (secHandLength);
var x2 = (canvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 7));
var y2 = (canvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 7));
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#466B76';
ctx.stroke();
}
}
function MARK_THE_SECONDS() {
for (var i = 0; i < 60; i++) {
angle = (i - 3) * (Math.PI * 2) / 60; // THE ANGLE TO MARK.
ctx.lineWidth = 1; // HAND WIDTH.
ctx.beginPath();
var x1 = (canvas.width / 2) + Math.cos(angle) * (secHandLength);
var y1 = (canvas.height / 2) + Math.sin(angle) * (secHandLength);
var x2 = (canvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 30));
var y2 = (canvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 30));
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#C4D1D5';
ctx.stroke();
}
}
function SHOW_SECONDS()
{
var sec = date.getSeconds();
angle = ((Math.PI * 2) * (sec / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 0.5; // HAND WIDTH.
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK.
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength), // DRAW THE LENGTH.
canvas.height / 2 + Math.sin(angle) * secHandLength);
// DRAW THE TAIL OF THE SECONDS HAND.
ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK.
ctx.lineTo((canvas.width / 2 - Math.cos(angle) * 20), // DRAW THE LENGTH.
canvas.height / 2 - Math.sin(angle) * 20);
ctx.strokeStyle = '#586A73'; // COLOR OF THE HAND.
ctx.stroke();
}
function SHOW_MINUTES()
{
var min = date.getMinutes();
angle = ((Math.PI * 2) * (min / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 1.5; // HAND WIDTH.
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK.
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength / 1.1), // DRAW THE LENGTH.
canvas.height / 2 + Math.sin(angle) * secHandLength / 1.1);
ctx.strokeStyle = '#999'; // COLOR OF THE HAND.
ctx.stroke();
}
function SHOW_HOURS() {
var hour = date.getHours();
var min = date.getMinutes();
angle = ((Math.PI * 2) * ((hour * 5 + (min / 60) * 5) / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 1.5; // HAND WIDTH.
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK.
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength / 1.5), // DRAW THE LENGTH.
canvas.height / 2 + Math.sin(angle) * secHandLength / 1.5);
ctx.strokeStyle = '#000'; // COLOR OF THE HAND.
ctx.stroke();
}
}
}
</script>
</html>以上是关于html 使用HTML5画布和JavaScript的简单模拟时钟。的主要内容，如果未能解决你的问题，请参考以下文章
在 HTML5 画布上工作时出现 JavaScript (JQuery) 问题
有没有一种不用图像就可以用 HTML5 画布和 javascript 动态绘制云的好方法？
在 HTML5 画布模式下使用带有外部 JavaScript 文件的 Adobe Animate CC