鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > 网站制作教程 > html5 > >

H5实现可缩放的时钟动画

来源:互联网 作者:佚名 时间:2022-06-30 12:28
这次给大家带来H5实现可缩放的时钟动画,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>

相信看了本文案例你已经掌握了方法,更多精彩请关注鸿网互联其它相关文章!

推荐阅读:

H5怎么操作WebSQL数据库

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

H5的拖放功能详解

以上就是H5实现可缩放的时钟动画的详细内容,更多请关注鸿网互联其它相关文章!

上一篇:H5的之sse服务器发送事件EventSource详解
下一篇:没有了
网友评论
<