使用HTML5 Canvas制作时钟实现方法分享

使用HTML5 Canvas制作时钟

使用HTML5 Canvas制作时钟是一个很有趣的技术，它可以帮助我们快速制作出一个美观而又实用的时钟。下面我们就来看看如何使用HTML5 Canvas来制作时钟。

1. 创建Canvas元素

我们需要在HTML文件中创建一个Canvas元素，用于显示时钟：

这里，我们为Canvas元素指定了一个id，以便我们可以在JavaScript代码中引用它。

2. 编写JavaScript代码

我们需要编写JavaScript代码来实现时钟的功能：

// 获取Canvas元素
var canvas = document.getElementById("clock");
// 获取Canvas的2D绘图环境
var ctx = canvas.getContext("2d");
// 设置画布的宽高
var width = canvas.width;
var height = canvas.height;
// 设置时钟的半径
var r = width / 2;
// 设置刻度线的宽度
var lineWidth = 10 * r / 200;
// 设置时钟中心点
var cx = width / 2;
var cy = height / 2;

// 绘制时钟的外边框
function drawCircle(){
    ctx.save();
    ctx.translate(cx, cy);
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.arc(0, 0, r, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// 绘制时钟的刻度线
function drawScale(){
    ctx.save();
    ctx.translate(cx, cy);
    ctx.beginPath();
    for(var i = 0; i < 60; i++){
        // 计算刻度线的起始点
        var startX = r * Math.cos(i * Math.PI / 30);
        var startY = r * Math.sin(i * Math.PI / 30);
        // 计算刻度线的结束点
        var endX = (r - lineWidth) * Math.cos(i * Math.PI / 30);
        var endY = (r - lineWidth) * Math.sin(i * Math.PI / 30);
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, endY);
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// 绘制时钟的指针
function drawPointer(){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    // 绘制时针
    ctx.save();
    ctx.translate(cx, cy);
    ctx.beginPath();
    ctx.rotate(hour * Math.PI / 6 + minute * Math.PI / 360 + second * Math.PI / 21600);
    ctx.moveTo(0, 10 * r / 200);
    ctx.lineTo(0, -r / 2);
    ctx.lineWidth = 8 * r / 200;
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
    // 绘制分针
    ctx.save();
    ctx.translate(cx, cy);
    ctx.beginPath();
    ctx.rotate(minute * Math.PI / 30 + second * Math.PI / 1800);
    ctx.moveTo(0, 10 * r / 200);
    ctx.lineTo(0, -r + 20 * r / 200);
    ctx.lineWidth = 6 * r / 200;
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
    // 绘制秒针
    ctx.save();
    ctx.translate(cx, cy);
    ctx.beginPath();
    ctx.rotate(second * Math.PI / 30);
    ctx.moveTo(-2 * r / 200, 20 * r / 200);
    ctx.lineTo(2 * r / 200, 20 * r / 200);
    ctx.lineTo(1 * r / 200, -r + 18 * r / 200);
    ctx.lineTo(-1 * r / 200, -r + 18 * r / 200);
    ctx.fillStyle = "#c14543";
    ctx.fill();
    ctx.closePath();
    ctx.restore();
}

// 绘制时钟
function drawClock(){
    ctx.clearRect(0, 0, width, height);
    drawCircle();
    drawScale();
    drawPointer();
    setTimeout(drawClock, 1000);
}

drawClock();

这段JavaScript代码的主要功能是：

• 获取Canvas元素；
• 设置画布的宽高、时钟的半径和刻度线的宽度；
• 绘制时钟的外边框；
• 绘制时钟的刻度线；
• 绘制时钟的指针；
• 定时调用绘制时钟的函数，使时钟动起来。

3. 运行结果

我们可以在浏览器中打开HTML文件，看到一个美观而又实用的时钟：