水球动态效果，要怎么用JS canvas实现-群英

水球动态效果，要怎么用JS canvas实现

Admin发表于 2022-05-26 17:28:32978 次浏览

关于“水球动态效果，要怎么用JS canvas实现”的知识点有一些人不是很理解，对此小编给大家总结了相关内容，文中的内容简单清晰，易于学习与理解，具有一定的参考学习价值，希望能对大家有所帮助，接下来就跟随小编一起学习一下“水球动态效果，要怎么用JS canvas实现”吧。

本文实例为大家分享了canvas实现水球加载动画的具体代码，供大家参考，具体内容如下

效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas实现水球加载动画</title>
    <style>
        body {
            display:flex;
            flex-flow:column wrap;
            justify-content:center;
            align-items:center;
        }
        #c {
            margin-top:20px;
        }
        input[type=range]::before {
            content:attr(min);
            color:#000;
            padding-right:5px;
        }
        input[type=range]::after {
            content:attr(max);
            color:#000;
            padding-left:5px;
        }
    </style>
</head>
<body>
<canvas id="c">当前浏览器不支持canvas 请升级！</canvas>
<input type="range" name="range" min="0" max="100" step="1">
 
<script>
    canvas = document.getelementbyid("c");
    ctx = canvas.getcontext("2d");
    orange = document.getelementsbyname("range")[0];
 
    m = math;
    sin = m.sin;
    cos = m.cos;
    sqrt = m.sqrt;
    pow = m.pow;
    pi = m.pi;
    round = m.round;
 
    ow = canvas.width = 300;
    oh = canvas.height = 300;
 
    // 线宽
    linewidth = 2
 
    // 大半径
    r = (ow / 2);
    cr = r - 8 * linewidth;
 
    ctx.beginpath();
 
    ctx.linewidth = linewidth;
 
    // 水波动画初始参数
    axislength = 2 * r - 16 * linewidth; // sin 图形长度
    unit = axislength / 8; // 波浪宽
    range = .2 // 浪幅
    nowrange = range;
    xoffset = 8 * linewidth; // x 轴偏移量
    data = ~~(orange.value) / 100; // 数据量
    sp = 0; // 周期偏移量
    nowdata = 0;
    waveupsp = 0.002; // 水波上涨速度
 
    // 圆动画初始参数
    arcstack = []; // 圆栈
    br = r - 8 * linewidth;
    soffset = -(pi / 2); // 圆动画起始位置
    circlelock = true; // 起始动画锁
 
    // 获取圆动画轨迹点集
    for (var i = soffset; i < soffset + 2 * pi; i += 1 / (8 * pi)) {
        arcstack.push([
            r + br * cos(i),
            r + br * sin(i)
        ])
    }
 
    cstartpoint = arcstack.shift(); // 圆起始点
 
    ctx.strokestyle = "#1c86d1";
    ctx.moveto(cstartpoint[0], cstartpoint[1])
 
    render(); // 开始渲染
 
    function drawsine() {
        ctx.beginpath();
        ctx.save();
        var stack = []; // 记录起始点和终点坐标
        for (var i = xoffset; i <= xoffset + axislength; i += 20 / axislength) {
            var x = sp + (xoffset + i) / unit;
            var y = sin(x) * nowrange;
 
            var dx = i;
 
            var dy = 2 * cr * (1 - nowdata) + (r - cr) - (unit * y);
 
            ctx.lineto(dx, dy);
            stack.push([dx, dy])
        }
 
        // 获取初始点和结束点
        var startp = stack[0]
        var endp = stack[stack.length - 1]
 
        ctx.lineto(xoffset + axislength, ow);
        ctx.lineto(xoffset, ow);
        ctx.lineto(startp[0], startp[1])
        ctx.fillstyle = "#1c86d1";
        ctx.fill()
        ctx.restore();
    }
 
    function drawtext() {
        ctx.globalcompositeoperation = 'source-over';
 
        var size = 0.4 * cr;
        ctx.font = 'bold ' + size + 'px microsoft yahei';
 
        txt = (nowdata.tofixed(2) * 100).tofixed(0) + '%';
 
        var fonty = r + size / 2;
        var fontx = r - size * 0.8;
        ctx.fillstyle = "rgba(06, 85, 128, 0.8)";
        ctx.filltext(txt, fontx, fonty)
    }
 
    function render() {
        ctx.clearrect(0, 0, ow, oh);
 
        if (circlelock) {
            if (arcstack.length) {
                var temp = arcstack.shift();
                ctx.lineto(temp[0], temp[1])
                ctx.stroke();
            } else {
                circlelock = false;
                ctx.lineto(cstartpoint[0], cstartpoint[1])
                ctx.stroke();
                arcstack = null;
 
                ctx.globalcompositeoperation = 'destination-over';
                ctx.beginpath();
                ctx.linewidth = linewidth;
                ctx.arc(r, r, br, 0, 2 * pi, 1);
 
                ctx.beginpath();
                ctx.save();
                ctx.arc(r, r, r - 16 * linewidth, 0, 2 * pi, 1);
                ctx.restore()
                ctx.clip();
 
                ctx.fillstyle = "#1c86d1";
 
                // 初始拖拽控件
                orange.addeventlistener("change", function() {
                    data = ~~(orange.value) / 100;
                    console.log("data=" + data)
                }, 0);
            }
        } else {
            // 开始水波动画
            // 控制波幅
            if (data >= 0.85) {
                if (nowrange > range / 4) {
                    var t = range * 0.01;
                    nowrange -= t;
                }
            } else if (data <= 0.1) {
                if (nowrange < range * 1.5) {
                    var t = range * 0.01;
                    nowrange += t;
                }
            } else {
                if (nowrange <= range) {
                    var t = range * 0.01;
                    nowrange += t;
                }
 
                if (nowrange >= range) {
                    var t = range * 0.01;
                    nowrange -= t;
                }
            }
 
            if ((data - nowdata) > 0) {
                nowdata += waveupsp;
            }
 
            if ((data - nowdata) < 0) {
                nowdata -= waveupsp
            }
 
            sp += 0.07;
            drawsine();
            drawtext();
        }
        requestanimationframe(render)
    }
</script>
<hr>
 
<pre style="color:red">
 感：  最近贡献一下我在教学中的小案例  希望能给你一些帮助 ,希望大家继续关注我的博客
 
                                                                               --王
</pre>
 
</body>
</html>

以上就是关于水球动态效果，要怎么用JS canvas实现的介绍，本文内容仅供参考，有需要的朋友可以借鉴了解看看，希望对大家学习或工作，想要了解更多欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： js,canvas,加载

上一篇：怎么用JS和HTML来还原童年经典游戏吃豆人

下一篇： opentracing中间件如何实现，在GoLang里有什么好方法