canvas粒子动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

// WIP
// COLOR BUG

function Circle(x, y, dx, dy, radius, color) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;
    this.colors = colors[Math.floor(Math.random() * colors.length)]
    // create method
    this.draw = function(color) {
        //  this.color = color
        ctx.beginPath();
        // change x and y for each i
        ctx.moveTo(this.x, this.y)
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        // outline
        ctx.fillStyle = this.colors
        ctx.fill();
    }

this.update = function() {
        if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
            this.dx = -this.dx
        }
        if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
            this.dy = -this.dy
        }
        // make more random

// send snow to spawn again

// velocity
        this.x += this.dx;
        this.y += this.dy;
        // interactivy
        if (mouse.x - this.x < 50 && mouse.x - this.x > -50 && mouse.y - this.y < 50 && mouse.y - this.y > -50) {
            // 20 max radius
            if (this.radius < 20) {
                this.radius += 1;
                this.draw(this.colors)
            }

// if radius is not greater than 2, or if mouse is not over x y, shrink circles
        } else if (this.radius > 2) {
            this.radius -= 1;
            this.draw()
        }

// call the draw
        this.draw()
    }

}

// instantiate new
// create array for all elements
let group = []
let group2 = []

for (let i = 0; i < 800; i++) {
    let radius = Math.random() * 4 + 1
    let x = Math.random() * (innerWidth - radius * 2) + radius;
    let y = Math.random() * (innerHeight - radius * 2) + radius;
    // get random num neg or pos
    let dx = (Math.random() - 0.5) * 4
    let dy = (Math.random() - 0.5) * 4
    let color = initColor

group.push(new Circle(x, y, dx, dy, radius, color))

}

/* for (let i = 0; i < 200; i++) {
     let radius = 4
     let x = Math.random() * (innerWidth - radius * 2) + radius;
     let y = Math.random() * (innerHeight - radius * 2) + radius;
     // get random num neg or pos
     let dx = (Math.random() - 0.5) * 8
     let dy = (Math.random() - 0.5) * 8
     let color = 'white'
     
     group2.push(new Circle(x, 0, dx, dy, radius, color))
 } */

function animate() {

// this increments
    requestAnimationFrame(animate);

// clear canvas so no overlap when canvas refesh
    ctx.clearRect(0, 0, innerWidth, innerHeight);
    // animate something
    for (let i = 0; i < group.length; i++) {
        // 
        group[i].update();
        //    group2[i].update();
    }

/*   ctx.beginPath();
       // change x and y for each i
       ctx.arc(x, y, radius, 0, Math.PI * 2, false)
       // outline
       ctx.strokeStyle = 'white'
       ctx.stroke();
       // reverse velocities in conditional
       // if x plus radius is greater than, bounce back
       // if x minus radius is less that, bounce back etc
       */

}

animate();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg