其他分享
首页 > 其他分享> > 用canvas 画一个水位波纹上升下降的进度球

用canvas 画一个水位波纹上升下降的进度球

作者:互联网

html:

<div class="cricle">   <canvas class="canvas" id="c"></canvas>   <input type="range" id="r" min="0" max="100" step="1"> </div>     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 = 252;   var mH = canvas.height = 252;   var lineWidth = 1;
  //圆   var r = mH / 2; //圆心   var cR = r - 8 * lineWidth; //圆半径   

  //Sin 曲线   var sX = 0;   var axisLength = mW; //轴长   var waveWidth = 0.034 ; //波浪宽度,数越小越宽   var waveHeight = 2; //波浪高度,数越大越高   var speed = 0.01; //波浪速度,数越大速度越快   var xOffset = 1; //波浪x偏移量
  ctx.lineWidth = lineWidth;        //画圈函数   var drawCircle = function(){
    ctx.beginPath();//开始绘制     ctx.fillStyle="rgba(255,255,255,.84)";//设置填充颜色     ctx.arc(r, r, cR+1, 0, 2 * Math.PI);     ctx.fill();     ctx.beginPath();     ctx.arc(r, r, cR, 0, 2 * Math.PI);     ctx.clip();   }      //画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;
    drawCircle();
    if(nowRange <= rangeValue){       var tmp = 1;       nowRange += tmp;     }
    if(nowRange > rangeValue){       var tmp = 1;       nowRange -= tmp;     }
    drawSin(xOffset+Math.PI*0.7, 'rgb(253, 210, 170)', 18);     drawSin(xOffset, 'rgba(254,113,32,0.70)', 18);     drawText();     drawSignText();
    xOffset += speed;     requestAnimationFrame(render);   }   //写百分比文本函数   var drawText = function(){     ctx.save();     var size = 0.3*cR;     ctx.font = size + 'px Microsoft Yahei';     ctx.textAlign = 'center';     ctx.fillStyle = "#C24700";     ctx.fillText(~~nowRange, r, r + size / 2);
    ctx.restore();   };   // 写百分号   var drawSignText = function() {     ctx.save();     var size = 0.15*cR;     ctx.font = size + 'px Microsoft Yahei';     ctx.textAlign = 'center';     ctx.fillStyle = "#C24700";     ctx.fillText('%', mW/1.6, r + size / 1);     ctx.restore();   }
  render();      css:    .cricle{   width: 252px;   height: 252px;   border-radius: 50%;   border: 1px solid #FFBE99;   background: rgba(243, 202, 184, 0.8); .canvas{   border-radius: 50%;   background-image: linear-gradient(40deg, #FFFFFF 0%, rgba(255,255,255, 0) 84%);   } }

标签:canvas,nowRange,ctx,水位,var,255,波纹,size
来源: https://www.cnblogs.com/qianxiaoniantianxin/p/15398110.html