首页 > 代码库 > canvas百分百特效

canvas百分百特效

2024-09-21 04:40:12   204人阅读

这个特效是别的人，非原创。原创地址

http://blog.csdn.net/lecepin/article/details/53536445

技术分享

背后的水是可以动的

代码我再研究了下，下面是加了注释的代码。不是原创好像没什么好说的了。。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态进度加载小球</title>
    <style>
        #c{
            margin: 0 auto;
            display: block;
        }
        #r{
            display: block;
            margin: 0 auto;
        }
        #r::before{
            color: black;
            content: attr(min);
            padding-right: 10px;
        }
        #r::after{
            color: black;
            content: attr(max);
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <canvas id="c"></canvas>
    <input type="range" id="r" min="0" max="100" step="1">
    <script>
        var canvas = document.getElementById(‘c‘);
        var ctx = canvas.getContext(‘2d‘);
        var range = document.getElementById(‘r‘);

        //range控件信息
        var rangeValue = http://www.mamicode.com/range.value;"rgba(06, 85, 128, 0.8)";
            ctx.fillText(nowRange + ‘%‘, r, r + size / 2);
            
            ctx.restore();
        };

        var render = function(){
            ctx.clearRect(0, 0, mW, mH);
            //通过不断刷新来获取range的值
            rangeValue = http://www.mamicode.com/range.value;>

 

canvas百分百特效


联系
我们