<!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{
500px;
height: 300px;
background:#071736;
overflow: hidden;
}
.polo{
250px;
height: 250px;
margin: 20px auto;
background: #133467;
border: 2px solid #1c6d9c;
border-radius: 50%;
position: relative;
}
.light{
position: absolute;
top: 20px;
left:5px;
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>