Kliknutím vytvoříte bláznivé částice - s Canvasem

Použijme HTML Canvas ke generování šílených částic při kliknutí.

Podívejte se na to zde:

KROKY

Soubor HTML obsahuje <canvas></canvas> to by vytvořilo prvek plátna.

Zbytek kódu patří do souboru JS.
Nyní, když máme prvek plátna,

const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
canvas.style.background = "black";

To nám pomáhá získat prvek canvas z DOM,const c = canvas.getContext("2d") definuje kreslicí kontext plátna, který je 2D a canvas.style.background = "black nastaví mu barvu pozadí.

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize", () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

Nyní nastavujeme šířku a výšku okna na šířku a výšku plátna a také se ujišťujeme, že při změně velikosti okna jsou šířka a výška v synchronizaci.

Vytvořme třídu s názvem Circle, která by nám pomohla generovat kruhové částice po kliknutí,

class Circle {
    constructor(x, y, color, radius) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.radius = radius;
    }
    draw() {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        c.fillStyle = this.color;
        c.fill();
        c.closePath();
    }
    update() {
        this.draw();
        this.x += Math.random() * 8 - 4;
        this.y += Math.random() * 8 - 4;
    }
}

Parametry třídy jsou x, y, barva a poloměr odpovídající polohám, barva a poloměr kružnice.
Ve třídě jsou dvě metody:draw() a update() ,
metoda draw nám pomůže nakreslit kruh pomocí beginPath()
který by začal kreslit cestu na plátně a c.arc(x, y, radius, startAngle, endAngle [, counterclockwise]) nám pomůže vytvořit oblouk, to by vyžadovalo x, y, poloměr, počáteční úhel, koncový úhel a proti směru hodinových ručiček (booleovské) argumenty.

update() je metoda, díky které se částice v kruhu chovají trochu bláznivě, protože aktualizuje polohy x a y částic, takže se trochu pohybují.

let prevX;
let prevY;
let circles = [];
document.addEventListener("click", () => {
    clientx = window.event.clientX;
    clienty = window.event.clientY;
    for (let i = 0; i < 10; i++) {
        const x = Math.random() * i * 20 + clientx;
        const y = Math.random() * i * 20 + clienty;
        const radius = Math.random() * 5;
        let val = i * 200 * Math.random() * clienty;
        let perc = Math.random() * 90;
        let color = `hsl(${val}, ${perc}%, 60%)`;
        let rad = Math.random() * 20;
        circles.push(new Circle(x, y, color, rad));
    }
    animate();
});

Po přidání posluchače události kliknutí window.event.clientX a window.event.clientY nám udává vertikální a horizontální souřadnice ukazatele myši.
Protože chci, aby se na každé kliknutí vygenerovalo 10 kruhů, mám cyklus od 0 do 10 a každý z kruhů by měl pomocí Math.random() různé polohy, barvy a velikosti. . Dále vytvoříme instanci třídy Circle a vložíme tyto instance do pole 'circles'. Nakonec bude zavolána funkce animace, která je:

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);
    circles.forEach((circle) => {
        circle.update();
    });
}

requestAnimationFrame řekne prohlížeči, že si přejeme provést animaci, vezme funkci zpětného volání, v našem případě je to samotná funkce animace - říkalo by se tomu rekurzivně vytvářející šílený efekt, který potřebujeme.
V neposlední řadě bychom pro každý prvek pole 'circles', které obsahuje všechny instance vytvořených kruhů, nazvali update() metoda.
Všimněte si, že metoda aktualizace volá samotnou metodu draw, proto jsme ji jinde nevolali. Takže metoda aktualizace nakreslí kruh a také aktualizuje jeho polohu pokaždé, když je zavolána funkce animace.

a to je vše.

Děkuji, že jste došli až sem, doufám, že se vám blog líbil stejně jako mě jeho psaní.
Zde je místo, kde se můžeme připojit:

instagram:https://www.instagram.com/artzy_artoholic/
twitter:https://twitter.com/Samritha22
codepen:https://codepen.io/samritha