xyzshop/data/resource/mobile/qixi/js/draw.js

function Draw() {
  this.canvas = document.getElementById('c');
  this.ctx = this.canvas.getContext('2d');
  this.rangeValue = 0;
  this.nowRange = 0;
  this.mW = this.canvas.width = 250;
  this.mH = this.canvas.height = 134;
  this.lineWidth = 2;
  this.r = this.mH / 2;
  this.cR = this.r - 16 * this.lineWidth;

  this.sX = 0;
  this.sY = this.mH / 2;
  this.axisLength = this.mW;
  this.waveWidth = 0.015;
  this.waveHeight = 6;
  this.speed = 0.09;
  this.xOffset = 0;

  this.ctx.lineWidth = this.lineWidth;
  this.IsdrawCircled = false;
  this.render();
}

Draw.prototype = {
  drawCircle: function () {
    this.ctx.beginPath();
    this.ctx.strokeStyle = 'transprant';
    this.ctx.arc(this.r, this.r, this.cR + 5, 0, 2 * Math.PI);
    this.ctx.stroke();
    this.ctx.beginPath();
    this.ctx.arc(this.r, this.r, this.cR, 0, 2 * Math.PI);
    this.ctx.clip();
  },

  drawSin: function () {
    this.ctx.save();
    var points = [];

    this.ctx.beginPath();
    for (var x = this.sX; x < this.sX + this.axisLength; x += 20 / this.axisLength) {
      var y = -Math.sin((this.sX + x) * this.waveWidth + this.xOffset);
      var dY = this.mH * (1 - this.nowRange / 100);
      points.push([x, dY + y * this.waveHeight]);
      this.ctx.lineTo(x, dY + y * this.waveHeight);
    }

    this.ctx.lineTo(this.axisLength, this.mH);
    this.ctx.lineTo(this.sX, this.mH);
    this.ctx.lineTo(points[0][0], points[0][1]);
    var my_gradient=this.ctx.createLinearGradient(0,0,0,134);
    my_gradient.addColorStop(0,"#e0cde3");
    my_gradient.addColorStop(1,"#f3edf5");
    this.ctx.fillStyle = my_gradient;
    this.ctx.fill();
    this.ctx.restore();
  },

  drawText: function () {
    this.ctx.save();
    var size = 0.4 * this.cR;
    this.ctx.font = "30px 'PingFang SC Light'";
    this.ctx.textAlign = 'center';
    this.ctx.fillStyle = '#fff';
    this.ctx.fillText(~~this.nowRange + '%', this.r + 70, this.r + size / 2);
    this.ctx.restore();
  },

  render: function () {
    // this.rangeValue = rangeValue;
    this.ctx.clearRect(0, 0, this.mW, this.mH);
    if (this.IsdrawCircled == false) {
      // this.drawCircle();
    }

    if (this.nowRange <= this.rangeValue) {
      var tmp = 1;
      this.nowRange += tmp;
    }
    if (this.nowRange > this.rangeValue) {
      var tmp = 1;
      this.nowRange -= tmp;
    }
    this.drawSin(this.xOffset);
    this.drawText();
    this.xOffset += this.speed;
    requestAnimationFrame(this.render.bind(this));
  },
  setValue: function(value) {
    this.rangeValue = value;
  }



}