H5实现可缩放的时钟动画-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

H5实现可缩放的时钟动画

这次给大家带来H5实现可缩放的时钟动画，H5实现可缩放时钟动画的注意事项有哪些，下面就是实战案例，一起来看一下。

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>canvas_time</title>    <style type="text/css">    p {        text-align: center;        margin-top: 250px;    }    #clock {        border: 1px solid #cccccc;    }    </style></head><body>    <p>        <canvas id="clock" height="600px" width="600px"></canvas>    </p>    <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 = 10*rem; //设置线宽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 = 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>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注9543建站博客其它相关文章！

相关推荐