直播平台搭建源码，canvas 画一条波浪线进度条

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