水球运动 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    @font-face{
        font-family: 'Dinfont';
        src: url('./DIN Alternate Bold.ttf');
    }
    .swrap{
        width: 500px;
        height: 300px;
        background:#071736;
        overflow: hidden;
    }
    .polo{
        width: 250px;
        height: 250px;
        margin: 20px auto;
        background: #133467;
        border: 2px solid  #1c6d9c;
        border-radius: 50%;
        position: relative;
    }
    .light{
        position: absolute;
        top: 20px;
        left:5px;
        width: 240px;
        height: 240px;
        background: linear-gradient(rgba(39,195,255,0.1),rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0));
        border-radius: 50%;
    }
</style>
<body>
    <div class="swrap">
        <div class="polo">
                <canvas id="c"></canvas>
                <div class="light"></div>
        </div>
    </div>
    <script>
        var makePolo = function (data) {
            var canvas = document.getElementById('c');
            var ctx = canvas.getContext('2d');
            var range = document.getElementById('r');

            //当前显示比例涨幅高度
            var nowRange = 0;

            //画布属性
            var mW = canvas.width = 250;
            var mH = canvas.height = 250;
            var lineWidth = 2;

            //圆属性
            var r = mH / 2; //圆心
            var cR = r - 4* lineWidth; //圆半径

            //Sin 曲线属性
            var sX = 0;
            var sY = mH / 2;
            var axisLength = mW; //轴长
            var waveWidth = 0.028;   //波浪宽度,数越小越宽    
            var waveHeight = 16; //波浪高度,数越大越高
            var speed = 0.09; //波浪速度，数越大速度越快
            var xOffset = 0; //波浪x偏移量

            ctx.lineWidth = lineWidth;

            //画圈函数
            var IsdrawCircled = false;
            var drawCircle = function () {
                ctx.beginPath();
                ctx.arc(r, r, cR, 0, 2 * Math.PI);
                var linear=ctx.createLinearGradient(100,100,100,200);
                linear.addColorStop(0,"#26c0ff");
                linear.addColorStop(0.5,"#0082fe");
                linear.addColorStop(1,"#01b7fe");
                ctx.strokeStyle = linear;
                ctx.lineWidth=4;
                ctx.stroke();
                ctx.clip();
            }

            //画sin 曲线函数
            var drawSin = function (xOffset) {
                ctx.save();

                var points = [];  //用于存放绘制Sin曲线的点

                ctx.beginPath();
                //在整个轴长上取点
                for (var x = sX; x < sX + axisLength; x += 20 / axisLength) {
                    //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
                    var y = -Math.sin((sX + x) * waveWidth + xOffset);
                    var dY = mH * (1 - nowRange / 100);
                    points.push([x, dY + y * waveHeight]);
                    ctx.lineTo(x, dY + y * waveHeight);
                }

                //封闭路径
                ctx.lineTo(axisLength, mH);
                ctx.lineTo(sX, mH);
                ctx.lineTo(points[0][0], points[0][1]);
                var linear=ctx.createLinearGradient(100,100,100,200);
                linear.addColorStop(0,"#26c0ff");
                linear.addColorStop(0.5,"#0082fe");
                linear.addColorStop(1,"#01b7fe");
                ctx.fillStyle =linear;
                ctx.fill();

                ctx.restore();
            };

            //写百分比文本函数
            var drawText = function () {
                ctx.save();
                var size = 0.6 * cR;
                ctx.font = size + 'px Dinfont';
                ctx.textAlign = 'center';
                ctx.fillStyle = "rgba(255, 255, 255, 1)";
                ctx.fillText(~~nowRange + '%', r, r + size / 2);
                ctx.restore();
            };

            var render = function () {
                ctx.clearRect(0, 0, mW, mH);
                if (IsdrawCircled == false) {
                    drawCircle();
                }
                if (nowRange <= data) {
                    var tmp = 1;
                    nowRange += tmp;
                }
                if (nowRange > data) {
                    var tmp = 1;
                    nowRange -= tmp;
                }
                drawSin(xOffset);
                drawText();
                xOffset += speed;
                requestAnimationFrame(render);
            }
            render();
        }
        makePolo(50);
    </script>
</body>

</html>

　　

posted on 2019-06-18 16:41  千寻岛主  阅读(210)  评论(0)    收藏  举报