vue3：codepen上生成的动效代码/ 前端生成统计图（echarts包）

codepen上生成的动态效果怎么放到自己的代码里（vue3组合式api）

设计给了个动态效果，说源码在codepen上面，打开一看，好家伙没有html，css也只有图里展示的这么点，那就是纯靠js实现。但是js里面这种的代码放到vue里肯定直接报错，那就需要我们处理一下。

思路：

1. 首先看codepen里面都用了什么包，可以看到是https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js 所以我们安装一下 npm i p5
2. 用开发者工具看了一下这个页面底下的效果，就是一个canvas，所以先考虑里面的方法是不是canvas里面带的。后面了解了一下，是p5里面的方法。

处理前：

const colors = ["#ff0000", "#00ff00", "#190E4F", "#03012C"];
const backgroundColor = "#cc3357";
const width = window.innerWidth;
const height = window.innerHeight;
const totalFrames = 1000;
let frameCount = 0;
let recording = false;

function setup() {
   
  canvas = createCanvas(width, height, WEBGL);
  noiseSeed(20);
  randomSeed(10);
}

function draw() {
   
  frameCount += 1;
  let frameDelta = (2 * Math.PI * (frameCount % totalFrames)) / totalFrames;