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

js 百分比能量球相关推荐

Autojs实现蚂蚁森林自动收取能量球
警告: 本文较为基础,大佬绕行,不喜勿喷下面正式开始步骤一:安装Autojs 开源下载链接:https://github.com/Ericwyn/Auto.js/releases 在Github上 ...
能量球效果（贝塞尔曲线）
在项目中需要用能量球来展示活动余额的剩余量,如下图的效果: 看到效果图,首先就会想怎么实现这个波浪的效果,其实这就是两个波浪线一直在左右移动,然后给你一个一直在那浪啊浪的错觉~~~说到曲线,脑阔中第一 ...
2019.7.8 校内测试题能量球
题目能量球(enb.cpp,1s,128MB) [问题描述]: sideman 有着一个你们所不知道的秘密.实际上,sideman 不是地球人,而是遥远的 Gliese 行星的生物.sideman ...
仿蚂蚁森林能量球效果遇到的问题记录
仿蚂蚁森林能量球效果遇到的问题记录常规先上图前提内容仿做一个蚂蚁森林的能量球效果,计划使用属性动画,来实现能量球上下摆动,然后点击能量球有一个收集的动画. 本来以为就这么几个简单的需求不会太难, ...
蚂蚁森林上线了9.7KG能量球，50万人争着为它买保护罩
自从支付宝上线蚂蚁森林,就成了追逐排名的battle新战场,比比谁种的树最多则成为了大家称霸森林排行的新方法. 当然,想要排名好,自然要付出不小的努力,但是最近的一个新消息,却一下子在蚂蚁森林的&qu ...
UE进阶实例42（制作技能CD和能量球材质）
#1. 制作技能CD 技能CD是环绕形状的,在正常的图片上覆盖了一个遮罩我们需要制作成遮罩的形式,方式我们进行运算,可以使用ValueStep也可以自己写覆盖的颜色我们可以直接使用混合原始图片 # ...
html设置表格列宽百分比,CSS属性中经常出现的百分比
起源:一道面试题(猫眼电新直能分支调二浏页器朋代说,影) 问题:css浏.富混工就划这些本公的响示近览记的迹更中的单位都有哪些?可以取百分数的单位有哪些?其中margin-top取百分数时是相对于谁插 ...
【游戏开发实战】Unity使用ShaderGraph制作一个Loading水球（能量球 | UI | 2D | 特效 | URP）
文章目录一.前言二.ShaderGraph入门三.ShaderGraph制作2D Loading水球 1.创建Unlit Shader Graph 2.创建一个圆 3.从下到上填充的效果 4.填 ...
百练_3142:球弹跳高度的计算
描述一球从某一高度落下(整数,单位米),每次落地后反跳回原来高度的一半,再落下. 编程计算气球在第10次落地时,共经过多少米? 第10次反弹多高? 输入输入一个整数h,表示球的初始高度. 输出输 ...

js 百分比能量球

js 百分比能量球相关推荐

最新文章

热门文章