Canvas时钟

最新推荐文章于 2023-06-07 17:23:32 发布

7aylorswift

最新推荐文章于 2023-06-07 17:23:32 发布

阅读量585

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web开发相关文章标签： canvas 时钟

本文链接：https://blog.youkuaiyun.com/geekerstar/article/details/77504690

Web开发相关专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API结合JavaScript实现一个动态显示当前时间的时钟。包括时钟背景绘制、小时、分钟及秒针的绘制方法。

效果图：

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas时钟</title>
    <style type="text/css">
        div {
            text-align: center;
            margin-top: 250px;
        }
        #clock {
            border: 1px; solid #ccc;
        }
    </style>
</head>
<body>
    <div>
        <canvas id="clock" height="200px" width="200px"></canvas>

    </div>
    <script type="text/javascript" src="clock.js"></script>
</body>
</html>

clock.js

/**
 * Created by Geekerstar on 2017/2/9.
 */
var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width/2;
var rem = width /200;

function drawBackground() {
    ctx.save();
    ctx.translate(r,r);
    ctx.beginPath();
    ctx.lineWidth = 10 * rem;
    ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);
    ctx.stroke();

    var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
    ctx.font = 18 *　rem　+　'px Arial';
    ctx.textAlign = 'center';
    ctx. textBaseline = 'middle';
    hourNumbers.forEach(function (number,i) {
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 30　*rem);
        var y = Math.sin(rad) * (r - 30　*rem);
        ctx.fillText(number,x,y);

    });

    for(var i =0;i < 60; i++){
        var rad = 2 * Math.PI /60 * i;
        var x = Math.cos(rad) * (r - 18　*rem);
        var y = Math.sin(rad) * (r - 18　*rem);
        ctx.beginPath();
        if (i % 5 === 0){
            ctx.fillStyle = '#000';
            ctx.arc(x,y,2*rem,0,2*Math.PI,false);
        }else{
            ctx.fillStyle = '#ccc';
            ctx.arc(x,y,2*rem,0,2*Math.PI,false);
        }
        ctx.fill();

    }

}

function drawHour(hour,minute) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 *Math.Pi / 12 * hour;
    var mrad = 2 *Math.PI / 12 / 60 *minute;
    ctx.rotate(rad+mrad);
    ctx.lineWidth = 6*rem;
    ctx.lineCap = 'round';
    ctx.moveTo(0,10*rem);
    ctx.lineTo(0,-r / 2);
    ctx.stroke();
    ctx.restore();
}

function drawMinute(minute) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * minute;
    ctx.rotate(rad);
    ctx.lineWidth = 3*rem;
    ctx.lineCap = 'round';
    ctx.moveTo(0,10*rem);
    ctx.lineTo(0, -r + 30*rem);
    ctx.stroke();
    ctx.restore();

}

function drawSecond(second) {
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle = '#c14543';
    var rad = 2 *Math.PI / 60 * second;
    ctx.rotate(rad);
    ctx.moveTo(-2*rem,20*rem);
    ctx.lineTo(2*rem,20*rem);
    ctx.lineTo(1, -r, + 18*rem);
    ctx.lineTo(-1, -r + 18*rem);
    ctx.fill();
    ctx.restore();
}
function drawDot() {
    ctx.beginPath();
    ctx.fillStyle = '#fff';
    ctx.arc(0,0,3*rem,0,2*Math.PI,false);
    ctx.fill();
}


function draw() {
    ctx.clearRect(0,0,width,height);
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    drawBackground();
    drawHour(hour,minute);
    drawMinute(minute);
    drawSecond(second);
    drawDot();
    ctx.restore();

}
draw();
setInterval(draw,1000);