html5 canvas js(数字时钟)实例代码

下面是“HTML5 Canvas JS（数字时钟）实例代码”的完整攻略。

前置知识

在学习 HTML5 Canvas JS 时，需要具备 HTML 和 JavaScript 的基础知识。

步骤

步骤1：创建 HTML 文件

首先，创建一个 HTML 文件，并添加一个 canvas 标签以显示数字时钟。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>数字时钟</title>
  </head>
  <body>
    <canvas id="clock" width="200" height="200"></canvas>
    <script src="clock.js"></script>
  </body>
</html>

步骤2：创建 JavaScript 文件

然后，创建一个 JavaScript 文件，并在其中编写数字时钟的绘制代码。代码如下：

var canvas = document.getElementById('clock');
var context = canvas.getContext('2d');
var radius = canvas.height / 2;

function drawClock() {
  context.beginPath();
  context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'white';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = 'black';
  context.stroke();
  context.beginPath();
  context.arc(radius, radius, radius * 0.9, 0, 2 * Math.PI, false);
  context.fillStyle = 'white';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = 'black';
  context.stroke();
  context.font = radius * 0.15 + "px arial";
  context.fillStyle = 'black';
  context.textAlign = "center";
  context.textBaseline = "middle";
  for (var i = 1; i <= 12; i++) {
    var angle = i * Math.PI / 6;
    context.rotate(angle);
    context.translate(0, radius * 0.85);
    context.rotate(-angle);
    context.fillText(i.toString(), 0, 0);
    context.rotate(angle);
    context.translate(0, -radius * 0.85);
    context.rotate(-angle);
  }
}

function drawHands() {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  hour = hour % 12;
  hour = (hour * Math.PI / 6) +
    (minute * Math.PI / (6 * 60)) +
    (second * Math.PI / (360 * 60));
  drawHand(context, hour, radius * 0.5, radius * 0.07);
  minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
  drawHand(context, minute, radius * 0.75, radius * 0.07);
  second = (second * Math.PI / 30);
  drawHand(context, second, radius * 0.9, radius * 0.02);
}

function drawHand(context, position, length, width) {
  context.beginPath();
  context.lineWidth = width;
  context.lineCap = "round";
  context.moveTo(radius, radius);
  context.rotate(position);
  context.lineTo(radius, radius - length);
  context.stroke();
  context.rotate(-position);
}

setInterval(function() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  drawClock();
  drawHands();
}, 1000);

代码中 drawClock() 函数用于绘制背景面板，并绘制时钟数字；drawHands() 函数用于绘制指针，并获取当前系统时间；drawHand() 函数用于具体实现指针的绘制。

最后，通过 setInterval() 函数和 clearRect() 方法实现时钟的每秒更新。

步骤3：样式和调整

最后，可以通过 CSS 修改时钟的外观样式，并可在 JavaScript 中细调旋转角度以达到特定效果。

以下是调整过旋转和样式的示例代码。

var canvas = document.getElementById('clock');
var context = canvas.getContext('2d');
var radius = canvas.height / 2;

function drawClock() {
  context.beginPath();
  context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'white';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#333';
  context.stroke();
  context.beginPath();
  context.arc(radius, radius, radius * 0.9, 0, 2 * Math.PI, false);
  context.fillStyle = 'white';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#333';
  context.stroke();
  context.font = radius * 0.15 + "px arial";
  context.fillStyle = '#333';
  context.textAlign = "center";
  context.textBaseline = "middle";
  for (var i = 1; i <= 12; i++) {
    var angle = i * Math.PI / 6;
    context.rotate(angle);
    context.translate(0, radius * 0.85);
    context.rotate(-angle);
    context.fillText(i.toString(), 0, 0);
    context.rotate(angle);
    context.translate(0, -radius * 0.85);
    context.rotate(-angle);
  }
}

function drawHands() {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  hour = hour % 12;
  hour = (hour * Math.PI / 6) +
    (minute * Math.PI / (6 * 60)) +
    (second * Math.PI / (360 * 60));
  drawHand(context, hour, radius * 0.5, radius * 0.07);
  minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
  drawHand(context, minute, radius * 0.75, radius * 0.07);
  second = (second * Math.PI / 30);
  drawHand(context, second, radius * 0.9, radius * 0.02);
}

function drawHand(context, position, length, width) {
  context.beginPath();
  context.lineWidth = width;
  context.lineCap = "round";
  context.moveTo(radius, radius);
  context.rotate(position);
  context.lineTo(radius, radius - length);
  context.stroke();
  context.rotate(-position);
}

setInterval(function() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.save();
  context.translate(radius, radius);
  context.rotate(-Math.PI / 2);
  drawClock();
  drawHands();
  context.restore();
}, 1000);

这段代码通过 context.rotate() 方法细调位置和旋转角度，并通过 CSS 修改时钟的外观样式。

示例说明

示例1

如果想让时钟移动到页面中心，只需在 JavaScript 中调整绘图时钟的坐标。代码如下：

...
var radius = Math.min(canvas.width, canvas.height) / 2;
...
function drawClock() {
  context.beginPath();
  context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
  ...
}
...
setInterval(function() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  drawClock();
  drawHands();
}, 1000);

这段代码通过获取 canvas 的宽度和高度，计算出时钟的半径并绘制时钟；最后通过 setInterval() 和 clearRect() 方法实现每秒更新时钟。

示例2

如果想让时钟的颜色和样式得到个性化展示，只需在 HTML 和 CSS 中做出相应修改。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>数字时钟</title>
    <style>
      canvas {
        background-color: #E8CBCA;
        border-radius: 50%;
        box-shadow: 2px 2px #BAA8A7;
      }
    </style>
  </head>
  <body>
    <canvas id="clock" width="200" height="200"></canvas>
    <script src="clock.js"></script>
  </body>
</html>

这段代码通过在 style 标签中添加 CSS 样式，来美化时钟的外观。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html5 canvas js(数字时钟)实例代码 - Python技术站