Eu utilizo o framework https://p5js.org/reference/ onde nele é possível criar animações através de um canvas.
Para utiliza-lo basta referenciar o JS no <head> da página:
<head>
<script src="src/p5.min.js"></script>
<script src="sketch.js"></script>
</head>O p5.min.js é a biblioteca e o sketch.js é meu arquivo principal, onde o canvas é criado.
function setup() {
createCanvas(480, 480); // Cria o canvas definindo seu tamanho
fill('red'); // Altera o *fill* para vermelho
ellipse(width / 2, height / 2, 10, 10); // Desenha um círculo de 10px de diâmetro no centro do canvas
}Há casos onde crio outros arquivos JS, como classes, e para utiliza-los basta referenciar novamente no <head>
<!-- index.html -->
<head>
<script src="src/p5.min.js"></script>
<script src="sketch.js"></script>
<script src="meu-objeto.js"></script>
</head>
// meu-objeto.js
class MeuObjeto {
constructor(tam) {
this.size = tam;
}
desenha() {
fill('red');
ellipse(width / 2, height / 2, this.size, this.size);
}
}
// sketch.js
function setup() {
createCanvas(480, 480);
let obj = new MeuObjeto(10);
obj.desenha();
}A questão é, esse workflow não serve para se trabalhar com componentes no Vue. Minha dúvida portanto é como posso usar essa biblioteca, colocando o canvas em algum componente da página.
Aliás, não somente para esse framework, mas para qualquer outro ou até arquivo JS, como importa-los no Vue?
