[JavaScript知识库] canvas手写一个简单时钟案例

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> canvas手写一个简单时钟案例 -> 正文阅读

[JavaScript知识库]canvas手写一个简单时钟案例

在这里插入图片描述
看懂当前时钟案例需要有一定canvas基础！

绘制时钟

<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

1、绘制表盘

const c = document.querySelector('#canvas');
const ctx = c.getContext("2d");
// 表盘半径
const r = 200;
// 平移轴心点
ctx.translate(250, 250);
// 初始化表盘
initClock();
function initClock() {
    ctx.beginPath();
    ctx.lineWidth = 6;
    ctx.arc(0, 0, r, 0, 2 * Math.PI, false);
    ctx.stroke();
    // 绘制文本
    drawClockLine();
    // 绘制时间刻度线
    drawClockText();
}

2、绘制刻度

// 绘制刻度线
function drawClockLine() {
    for (let i = 0; i < 60; i++) {
        const radian = 360 / 60 * i * Math.PI / 180;
        ctx.beginPath();
        // 保存坐标轴
        ctx.save();
         // 转动坐标轴  
        ctx.rotate(radian); 
        ctx.moveTo(r, 0);
        ctx.lineWidth = 3;
        ctx.lineCap = "round";
        ctx.lineTo(190, 0);
        if (i % 5 === 0) {
            ctx.lineWidth = 6;
            ctx.lineTo(182, 0);
        }
        ctx.stroke();
        // 恢复原来坐标轴
        ctx.restore();  
    }
}

3、绘制文本

// 绘制文本
function drawClockText() {
    const textList = ["Ⅲ", "Ⅳ", "Ⅴ", "Ⅵ", "Ⅶ", "Ⅷ", "Ⅸ", "Ⅹ", "Ⅺ", "Ⅻ", "Ⅰ", "Ⅱ"]
    for (let j = 0; j < 12; j++) {
        let radian = 360 / 12 * j * Math.PI / 180;
        let x = (r - 35) * Math.cos(radian);
        let y = (r - 35) * Math.sin(radian);
        ctx.font = "18px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "black";
        ctx.fillText(textList[j], x, y);
    }
    const NAME = "Daniel Wellington";
    ctx.textAlign = "center";
    ctx.fillText(NAME, 0, -100);
}
// 绘制圆心红点
dot();
function dot() {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.fillStyle = "red";
    ctx.arc(0, 0, 4, 0, 2 * Math.PI, false);
    ctx.fill();
}

4、绘制表针

// 时针
function drawHourLine() {
    const today = new Date();
    let hour = today.getHours();
    const minutes = today.getMinutes();
    if (hour > 12) {
        hour = hour - 12;
    }
    // 计算分钟和小时的弧度，用以定位时针的指向
    const minuteRadian = 30 / 60 * minutes * Math.PI / 180;
    const hourRadian = 30 * hour * Math.PI / 180;
    drawTimeLine("black", minuteRadian + hourRadian, 8, 20, -145);
}
// 分针
function drawMinuteLine() {
    const today = new Date();
    const minutes = today.getMinutes();
    // 计算分钟的弧度，用以定位分针的指向
    const radian = 6 * minutes * Math.PI / 180;
    drawTimeLine("red", radian, 4, 25, -160);
}
// 秒针
function drawSecondLine() {
    const today = new Date();
    const seconds = today.getSeconds();
    // 计算秒钟的弧度，用以定位秒针的指向
    const radian = 6 * seconds * Math.PI / 180;
    drawTimeLine("blue", radian, 2, 30, -170);
}
// 绘制时针分针秒针
function drawTimeLine(color, radian, lineWidth, y1, y2) {
    ctx.save();
    ctx.rotate(radian);
    ctx.beginPath();
    ctx.moveTo(0, y1);
    ctx.lineTo(0, y2);
    ctx.lineWidth = lineWidth;
    ctx.lineCap = "round";
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.restore();
}

5、表针动画

// 时分秒统一执行
handleAllTimeLine();
function handleAllTimeLine() {
    drawHourLine();
    drawMinuteLine();
    drawSecondLine();
}
// 每秒重绘表盘
setInterval(() => {
    // 清除历史指针路径
    ctx.clearRect(-210, -210, 450, 450);
    // 执行时间刷新
    handleAllTimeLine();
    // 重绘表盘
    initClock();
    // 重绘圆心
    dot();
}, 1000);