直播平臺搭建原始碼，canvas 畫一條波浪線 進度條

直播平臺搭建原始碼，canvas 畫一條波浪線 進度條

<template>
  <view>
    <canvas :style="{'width': width + 'rpx','height': height  + 'rpx','backgroundColor': '#d2d8d2'}"
      canvas-id="firstCanvas" id="firstCanvas"></canvas>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        ctx: null,
        width: 600,
        height: 400,
        step: 2,
        stepHeight: -60,
        trigger: true
      }
    },
    mounted() {
      this.ctx = uni.createCanvasContext('firstCanvas', this)
      //this.drawWave()
      //this.drawWave()
      this.moveWave()
    },
 
    computed: {
      canvasWidth() {
        return uni.upx2px(this.width)
      },
      canvasHeight() {
        return uni.upx2px(this.height)
      },
      stepWave() {
        return uni.upx2px(this.canvasWidth) / this.step
      },
      stepWaveHeight() {
        return uni.upx2px(this.stepHeight)
      },
      canvasCenter() {
        return {
          x: this.canvasWidth / 2,
          y: this.canvasHeight / 2
        }
      }
    },
    methods: {
      //計算位移 波浪高度的值
      moveWave() {
        let offset = -this.stepWave * 2
        setInterval(() => {
          offset++
          if (offset >= 0) {
            offset = -this.stepWave * 2
          }
 
          if (this.stepHeight > -10) {
            this.trigger = true
          }
          if (this.stepHeight < -50) {
            this.trigger = false
          }
          if (this.trigger) {
            this.stepHeight -= 0.2
          } else {
            this.stepHeight += 0.2
          }
 
          this.drawWave(offset)
        }, 10)
      },
      drawWave(offset) {
 
        // 遮罩開始
        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.ctx.save();
        this.ctx.beginPath();
 
        this.ctx.fillStyle = '#d5ffc5'
        this.ctx.arc(this.canvasCenter.x, this.canvasCenter.y, 100, 0, Math.PI * 2, false);
        this.ctx.closePath();
        this.ctx.fill();
        // this.ctx.setStrokeStyle("#d5ffc5")
        // this.ctx.stroke();
        this.ctx.clip();
        //this.ctx.restore()
        // 遮罩結束
 
 
        this.ctx.beginPath()
        //線條起點
        this.ctx.moveTo(0 + offset, this.canvasCenter.y); //寬高
        // this.ctx.setStrokeStyle("#002ae6") //顏色
        this.ctx.setLineWidth(1)
        for (let i = 0; i < this.step * 3; i++) {
          if (i % 2 == 0) {
            this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2 + offset, this.canvasCenter.y + this
              .stepWaveHeight, this.stepWave * (i + 1) + offset, this.canvasCenter.y)
          } else {
            this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2 + offset, this.canvasCenter.y - this
              .stepWaveHeight, this.stepWave * (i + 1) + offset, this.canvasCenter.y)
          }
        }
 
        this.ctx.lineTo(this.stepWave * (this.step * 2 + 3) + offset, this.canvasHeight)
        this.ctx.lineTo(0 + offset, this.canvasHeight)
        this.ctx.closePath()
 
        let grad = this.ctx.createLinearGradient(0, 0, 0, this.canvasHeight);
        grad.addColorStop(0, '#1e92ea')
        grad.addColorStop(1, '#2C405A')
 
        // this.ctx.setFillStyle('#3cee06')
        this.ctx.setFillStyle(grad)
 
        this.ctx.fill()
        this.ctx.restore();
        //this.ctx.strokeStyle = "red"
        //this.ctx.stroke()
 
 
        this.ctx.draw()
      },
    }
  }
</script>
 
<style scoped>
  .canvas-view {}
</style>

以上就是 直播平臺搭建原始碼，canvas 畫一條波浪線 進度條，更多內容歡迎關注之後的文章