「加速球」加速球样式

加速球

直接上码


<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>精灵球</title>
    <style type="text/css">
    #c {

        margin: 0 auto;

        display: block;
        
        width: 170px;

        height: 170px;
    }

    #r {

        display: block;

        margin: 0 auto;

        /*display: none;*/

    }

    #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 type="text/javascript">

    var canvas = document.getelementbyid('c');

    var ctx = canvas.getcontext('2d');

    var range = document.getElementById('r');

    //range控件信息

    var rangeValue = range.value;

    var nowRange = 0; //用于做一个临时的range

    //画布属性

    var mW = canvas.width = 340;

    var mH = canvas.height = 340;

    var lineWidth = 2;

    //圆属性

    var r = mH / 2; //圆心

    var cR = r - 16 * lineWidth; //圆半径

    var circleColor="#1080d0";

    var waterColor="#1c86d1";

    ctx.lineWidth = lineWidth;

   

    /*画圈函数*/

    var drawCircle = function() {

        ctx.beginPath();

        ctx.strokeStyle = circleColor;

        ctx.arc(r, r, cR, 0, 2 * Math.PI);
        
        ctx.stroke();

        ctx.beginPath();

        ctx.arc(r, r, cR-8, 0, 2 * Math.PI);

        ctx.clip(); //裁剪

    }

     //Sin 曲线属性

    var sX = 0;

    var sY = mH / 2;

    var axisLength = mW; //轴长 ==> 可见的x轴的长度

    var waveWidth = 0.015; //波浪宽度,数越小越宽 ==>周期

    var waveHeight = 7; //波浪高度,数越大越高 ==>振幅

    var speed = 0.09; //波浪速度，数越大速度越快

    var xoffset = 0; //波浪x偏移量 

    var IsdrawCircled = false;

    //画sin 曲线函数

    var drawSin = function(xOffset) {

        ctx.save();

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

        ctx.beginPath();

        //在整个轴长上取点

        for (var x = 0; x < axisLength; x += 10/axisLength) {

            //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)==> y=Asin(wx+t）

            var y = -Math.sin( 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(0, mH);

        // ctx.lineTo(points[0][0], points[0][1]);

        var gradient = ctx.createLinearGradient(0, 250, 0, 0);

        gradient.addColorStop("0", "#3083ec");

        gradient.addColorStop("0.5", "#2cc8ec");

        gradient.addColorStop("1.0", "#15feff");

        ctx.fillStyle = gradient;

        // ctx.fillStyle = waterColor;

        ctx.shadowBlur=5;
        
        ctx.shadowColor="#1c86d1";

        ctx.fill();

        ctx.restore();

    };

    //写百分比文本函数

    var drawtext = function() {

        ctx.save();

        var size = 0.4 * cR;

        ctx.font = size + 'px Microsoft Yahei';

        ctx.textAlign = 'center';

        ctx.fillStyle ="hsl(210,100%,"+(nowRange/2+50)+"%)";
        
        ctx.fillText(nowRange + '%', r, r + size / 2);

        ctx.restore();

    };

    /*开始*/

    var render = function() {

        ctx.clearRect(0, 0, mW, mH); //清空画布

        rangeValue = range.value;

        if (IsdrawCircled == false) {

            drawCircle(); //开始画圆

            IsdrawCircled = true;

        }
        /* 遍历+1 */

        if (nowRange <= rangeValue) {

            var tmp = 1;

            nowRange += tmp;

        }

        if (nowRange > rangeValue) {

            var tmp = 1;

            nowRange -= tmp;

        }

        drawSin(xOffset);

        drawText();

        xOffset += speed;

        requestAnimationFrame(render);//循环播放

    }

    render();
    </script>

</body>

</html>

附上我的灵感来源

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>
<style type="text/css" media="screen">
    #joking {
        width: 500px;
        height: 300px;
    }
</style>

<body>
    <canvas id="joking"></canvas>
</body>
<!--  y=Asin(wx+t） -->
<script type="text/JavaScript">
var c = document.querySelector('#joking');
var ctx = c.getContext('2d');
/*sin函数*/
var wid = c.width = 250;
var hei = c.height = 250;
var y, a = 12,
    w = 1 / 10,
    cha = 70;
    speed = 1;

function aim() {
    ctx.clearRect(0, 0, wid, hei);
    ctx.beginPath();
    for (var x = 0; x <= wid; x += 1 / wid) {
        y = Math.sin(x * w + speed) * a + cha;
        ctx.lineTo(x, y);
    }
    ctx.lineTo(wid, hei)
    ctx.lineTo(0, hei);
    ctx.lineWidth = '1';
    var gradient = ctx.createLinearGradient(0, 250, 0, 0);
    gradient.addColorStop("0", "#3083ec");
    gradient.addColorStop("0.5", "#2cc8ec");
    gradient.addColorStop("1.0", "#15feff");

    ctx.strokeStyle = '#15feff';
    ctx.fillStyle = gradient;

    ctx.fill();

    ctx.restore();
    ctx.stroke();
    speed += 0.2;
    requestAnimationFrame(aim);
}
aim();
</script>

</html>

这里的链接可以观看效果而且代码也是最终版的！

https://codepen.io/NidhoggDJoking/pen/OrVvKQ

$\small By \ \ Nidhogg\cdot D\cdot Joking$

加速球样式

加速球

直接上码

相关阅读

栏目导航

推荐阅读

热门阅读