js 百分比能量球

﹏ヽ暗。殇╰゛Y 2023-06-30 08:48 5阅读 0赞

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();

运行效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhdGVyX1BvcGNvcm4_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhdGVyX1BvcGNvcm4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020011609362077.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhdGVyX1BvcGNvcm4=,size_16,color_FFFFFF,t_70
[https_www.cnblogs.com_pagoda_p_9463220.html]: https://www.cnblogs.com/pagoda/p/9463220.html

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关【每日随笔】思维模型 ② ( 能量模型 | 能量交互 | 能量模型使用法则 | 能量循环 | 能量的使用原则 | 远离 “ 能量吸血鬼 “ | 避开因果 )

一、能量模型1、能量概念2、能量模型组成3、能量交互二、能量模型使用法则1、能量循环 ( 重点 )2、能量的使用原则3、远离 " 能量吸血鬼 "4、避开因果

蔚落/ 2024年05月28日 10:06/ 0 赞/ 65 阅读

相关 js计算百分比相加

JavaScript 可以使用以下方法来计算百分比相加: function addPercentages(a, b) { let result = a +

矫情吗；*/ 2024年03月26日 08:13/ 0 赞/ 48 阅读

相关 js 百分比能量球

html源码： <canvas id="c"></canvas> <input type="range" id="r" min="0" max="100" s

﹏ヽ暗。殇╰゛Y/ 2023年06月30日 08:48/ 0 赞/ 6 阅读

相关 js画圆形百分比

\- svg <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

拼搏现实的明天。/ 2022年12月13日 04:04/ 0 赞/ 159 阅读

相关 js基于当前值计算百分比

GetPercent(total, num) { // total总数基数(相当于100%) // num当前数值 num = pars

「爱情、让人受尽委屈。」/ 2022年10月15日 12:58/ 0 赞/ 200 阅读

相关小球跳动碰撞js代码

[下载地址][Link 1]小球跳动碰撞js代码，原生JavaScript代码实现的动画特效。 ![1631561351.png][] dd: [Link 1]: ht

蔚落/ 2022年09月11日 13:25/ 0 赞/ 182 阅读

相关【English】能量英语带给你能量

前言不知不觉在英语组长的领导下我们每周一个故事已经进行到一半了，这周是第十五个故事了，我们小组每周最后一天会录音一下我们的topic作为我们成长和坚持的见证。

￡神魔★判官ぃ/ 2022年07月12日 05:00/ 0 赞/ 181 阅读

相关 JS做旋转的小球

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

痛定思痛。/ 2021年12月12日 10:59/ 0 赞/ 229 阅读

相关 Auto.JS之蚂蚁森林自动收集能量

偶然间发现一个好玩的东西，有做手机脚本的可以试试，真的很棒： [https://github.com/hyb1996/Auto.js][https_github.com_h

心已赠人/ 2021年11月14日 12:00/ 0 赞/ 304 阅读

相关 js运动小球碰壁反弹

js运动小球碰壁反弹 1、触碰窗口壁沿反弹，同时改变颜色 <!DOCTYPE html> <html lang="en"> <head

约定不等于承诺〃/ 2021年07月25日 12:51/ 0 赞/ 433 阅读