codepen上生成的动态效果怎么放到自己的代码里(vue3组合式api)
设计给了个动态效果,说源码在codepen上面,打开一看,好家伙没有html,css也只有图里展示的这么点,那就是纯靠js实现。但是js里面这种的代码放到vue里肯定直接报错,那就需要我们处理一下。
思路:
- 首先看codepen里面都用了什么包,可以看到是https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js 所以我们安装一下 npm i p5
- 用开发者工具看了一下这个页面底下的效果,就是一个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