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>
    

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

推荐阅读：

H5怎么操作websql数据库

前缀data-属性和dataset的使用方法

H5的拖放功能详解

以上就是H5实现可缩放的时钟动画的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！