Question

如何将css时钟添加到下面的图像中。

我甚至想在图像中添加日期，月份和名称。

enter image description here

时钟必须放在圆圈上，所有日期都放在矩形上。如下所示。

        Year
Moth           day number

Clock
          name of the day

我有所有后端代码接受如何将它们放在图像上。

我只需要帮助我们如何在图像上放置一些文字和时钟。

将不胜感激任何帮助。

非常感谢

这是css时钟：

<!DOCTYPE html>
<html>
<head>
    <title>Clock</title>
    <style type="text/css">
        #container {
            margin: 0 auto;
            width: 0 auto;
            text-align: center;
            border: black dashed 1px;
            font-family: sans-serif;
            background-color: #000000;
        }


    </style>
</head>
<body>
    <div id="container">
        <canvas id="analogClock" width="102" height="102">
            Clock
        </canvas>
    </div>



    <script type="text/javascript" src="js/analogCanvasClock.js"></script>
    <script type="text/javascript">
        setupAnalogClock(document.getElementById("analogClock"), 100);
    </script>

</body>
</html>

这是js：

function setupAnalogClock(canvas, clockWidth) {
var ctx = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

function tick() {
    var date = new Date();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawStatic();

    var hours = date.getHours();
    ctx.strokeStyle = "white";
    ctx.lineWidth = 2;
    drawHand(clockWidth / 3, hours * 30);

    var minutes = date.getMinutes();
    ctx.strokeStyle = "white";
    ctx.lineWidth = 2;
    drawHand(clockWidth / 2, minutes * 6);

    var seconds = date.getSeconds();
    ctx.strokeStyle = "red";
    ctx.lineWidth = 1;
    drawHand(clockWidth / 2, seconds * 6);

    function drawStatic() {
        ctx.beginPath();
        ctx.arc(centerX, centerY, clockWidth / 2, 0, 2 * Math.PI, false);
        ctx.strokeStyle = "white";
        ctx.lineWidth = 2;
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.arc(centerX, centerY, 2, 0, 2 * Math.PI, false);
        ctx.fillStyle = "white";
        ctx.fill();
        ctx.closePath();

        drawNumbers();

        function drawNumbers() {
            var i = 12;
            ctx.strokeStyle = "white";
            ctx.lineWidth = 2;
            while (i > 0) {
                ctx.save();
                ctx.beginPath();
                ctx.translate(centerX, centerY);
                var angle = (i * 30) * Math.PI / 180;
                ctx.rotate(angle);
                ctx.translate(0, -clockWidth / 2);

                // Drawing numbers doesn't look so good because of the origin of the text
                // ctx.save();
                // ctx.translate(0, -10);
                // ctx.rotate(-angle);
                // ctx.fillText(i, -3, 0);
                // ctx.restore();

                ctx.moveTo(0, 0);
                ctx.lineTo(0, 10);
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
                i--;
            }
        }

    }

    function drawHand(length, angle) {
        ctx.save();
        ctx.beginPath();
        ctx.translate(centerX, centerY);
        ctx.rotate(-180 * Math.PI / 180);
        // Correct for top left origin
        ctx.rotate(angle * Math.PI / 180);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, length);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }

}

tick();
window.setInterval(tick, 1000);
}

如何在图像上放置模拟画布时钟

0 个答案: