HTML5 implementation of scalable clock code

Time:2019-11-6

I don’t need to talk about much nonsense. I’ll post the code for you. The specific code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas_time</title>
    <style type="text/css">
    div {
        text-align: center;
        margin-top: 250px;
    }
    #clock {
        border: 1px solid #cccccc;
    }
    </style>
</head>
<body>
    <div>
        <canvas id="clock" height="600px" width="600px"></canvas>
    </div>
    <script type="text/JavaScript" >
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(); // save the current environment variable;
    CTX. Translate (R, R); // reset coordinates to R, R
    CTX. Beginpath(); // start a path
    Ctx.linewidth = 10 * rem; // set the line width to 10;
    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]; // define array
    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.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            ctx.fillStyle = "#000";
        } else {
            ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            ctx.fillStyle = "#ccc";
        }
        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 = 'red';
        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 + 16*rem);
        ctx.lineTo(-1, -r + 16*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 draw01() {
        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();
    }
    draw01();
    setInterval(draw01, 1000);
</script>
</body>
</html>

summary

The above is the HTML 5 scalable clock code introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave a message to me, and Xiaobian will reply you in time. Thank you very much for your support of the developepaer website!

Recommended Today

Removing strict mode of MySQL under Linux

1. Find mysqld $ which mysqld /usr/sbin/mysqld 2. Find my.cnf $ /usr/sbin/mysqld –verbose –help | grep -A 1 ‘Default options’ /etc/my.cnf /etc/mysql/my.cnf /usr/etc/my.cnf ~/.my.cnf 3. Use VIM to open / etc / my.cnf $ vim /etc/my.cnf 4. Modify the configuration and delete strict trans tables sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES If not, add it directly sql_mode=NO_ENGINE_SUBSTITUTION 5. Restart MySQL […]