canvas滚动 vue_Canvas+Vue<canvas波浪效果>

wave

export default {

data() {

return {

waveAllHeight: 400, //波浪的整体高度

waveCount: 4, //波浪个数

waveHeight: 15 //波浪起伏高度

};

},

mounted() {

this.wavePlay("wave1", 140, "hsl(230, 97%, 61%)", 1500);

this.wavePlay("wave2", 140, "hsl(200, 97%, 61%)", 3000);

this.wavePlay("wave3", 140, "hsl(170, 97%, 61%)", 2500);

},

methods: {

// * 底部波浪

// * @param $canvasID canvasID

// * @param $progress 波浪位置的高度

// * @param $maveColor 波浪颜色

// * @param $time 运动周期

//

//波浪运动动画

wavePlay($canvasID, $progress, $maveColor, $time) {

let _this = this;

let waveWidth = 3300, //波浪长度

offset = 0,