js 百分比能量球

html源码：

<canvas id="c"></canvas>
<input type="range" id="r" min="0" max="100" step="1">

css源码：

body{
    position: relative;
    width:100vw;
    height: 100vh;
    margin: 0;
}
canvas{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    border: 1px dashed rgba(0,0,0,0.1)
}

js源码：

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var range = document.getElementById('r');

//range控件信息
var rangeValue = range.value;
var nowRange = 40;   //用于做一个临时的range

//画布属性
var mW = canvas.width = 350;
var mH = canvas.height = 350;
var lineWidth = 1;

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

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

ctx.lineWidth = lineWidth;

//画圈函数
var IsdrawCircled = false;
var drawCircle = function(){

    ctx.beginPath();
    ctx.strokeStyle = '#1080d0';
    ctx.arc(r, r, cR+1, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(r, r, cR, 0, 2 * Math.PI);
    ctx.clip();
    IsdrawCircled = true;
}

//画sin 曲线函数
var drawSin = function(xOffset, color, waveHeight){
    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) * 0.8 + 0.1;

        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]);
    ctx.fillStyle = color;
    ctx.fill();

    ctx.restore();
};

var render = function(){
    ctx.clearRect(0, 0, mW, mH);

    rangeValue = range.value;

    if(IsdrawCircled == false){
        drawCircle();
    }

    if(nowRange <= rangeValue){
        var tmp = 1;
        nowRange += tmp;
    }

    if(nowRange > rangeValue){
        var tmp = 1;
        nowRange -= tmp;
    }

    drawSin(xOffset+Math.PI*0.7, 'rgba(28, 134, 209, 0.5)', 18);
    drawSin(xOffset, '#1c86d1', 18);
    drawText();

    xOffset += speed;
    requestAnimationFrame(render);
}
//写百分比文本函数
var drawText = function(){
    ctx.save();

    var size = 0.4*cR;
    ctx.font = size + 'px Microsoft Yahei';
    ctx.textAlign = 'center';
    ctx.fillStyle = "rgba(06, 85, 128, 0.5)";
    ctx.fillText(~~nowRange + '%', r, r + size / 2);

    ctx.restore();
};

render();

运行效果：

文章来源：https://www.cnblogs.com/pagoda/p/9463220.html