HTML5实现可缩放时钟代码

建站知识 2021-07-02 23:00www.168986.cn长沙网站建设

废话不多说了，直接给大家贴代码了，具体代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas_time</title>
    <style type="text/css">
    div {
        text-align: center;
        margin-: 250px;
    }
    #clock {
        border: 1px solid #;
    }
    </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(); //存储当前环境变量；
    ctx.translate(r, r); //重置坐标到r，r
    ctx.beginPath(); // 起始一条路径
    ctx.lineWidth = 10rem; //设置线宽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]; //定义数组
    ctx.font = 18rem+"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 - 30rem);
        var y = Math.sin(rad)  (r - 30rem);
        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 - 18rem);
        var y = Math.sin(rad)  (r - 18rem);
        ctx.beginPath();
        if (i % 5 === 0) {
            ctx.arc(x, y, 2rem, 0, 2  Math.PI, false);
            ctx.fillStyle = "#000";
        } else {
            ctx.arc(x, y, 2rem, 0, 2  Math.PI, false);
            ctx.fillStyle = "#c";
        }
        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 = 6rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10rem);
        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 = 3rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10rem);
        ctx.lineTo(0, -r + 30rem);
        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(-2rem, 20rem);
        ctx.lineTo(2rem, 20rem);
        ctx.lineTo(1, -r + 16rem);
        ctx.lineTo(-1, -r + 16rem);
        ctx.fill();
        ctx.restore();
    }
    function drawDot() {
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(0, 0, 3rem, 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>

以上所述是长沙网络推广给大家介绍的HTML5实现可缩放时钟代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：浅谈html5之sse服务器发送事件EventSource介绍下一篇：HTML5操作WebSQL数据库的实例代码

HTML5实现可缩放时钟代码

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

HTML5实现可缩放时钟代码

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设