canvas蓝色线条流动湍流世界动画效果代码-html代码-BFW代码库

canvas蓝色线条流动湍流世界动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas蓝色线条流动湍流世界动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
 

</head>
<body>

  <script >

let App = {}
App.setup = function () {
        // The setup function initializes everything in a permanent way (will never be set anew)
        
        const canvas = document.createElement('canvas')
        //const maxWidth = 9933, maxHeight = 14043
        //const quality = 0.1
        //this.filename = "artwork"
        
        this.canvas = canvas
        this.canvas.width = window.innerWidth//maxWidth * quality//window.innerWidth
        this.canvas.height = window.innerHeight//maxHeight * quality//3370//window.innerHeight
        this.ctx = this.canvas.getContext('2d')
        this.width = this.canvas.width
        this.height = this.canvas.height
        this.dataToImageRatio = Math.max(this.width, this.height) / 1000
  
        // Blend mode /!\ Don't use if you can! Can be a mega source of lag, proportional to canvas size
        this.ctx.globalCompositeOperation = 'darker'// This one is OK
        //this.ctx.globalCompositeOperation = 'lighter'// This one is OK

        this.ctx.imageSmoothingEnabled = false
        this.ctx.webkitImageSmoothingEnabled = false
        this.ctx.msImageSmoothingEnabled = false
        this.xC = this.width / 2
        this.yC = this.height / 2

        document.getElementsByTagName('body')[0].appendChild(canvas)

        // Particle system properties
        this.lifespan = 300
        this.popPerBirth = 5
        this.maxPop = 1500
        this.birthFreq = 1
}
App.start = function () {
        // The start function sets, and potentially resets things that will change over time
        this.stepCount = 0
        this.particles = []
        
        // Counters for UI
        this.drawnInLastFrame = 0
        this.deathCount = 0
        
        // Initial paint (background most often)
        this.initDraw()
}
App.evolve = function () {
        let time1 = performance.now()

        this.stepCount++

        // Use birth control
        if (this.stepCount % this.birthFreq == 0 && (this.particles.length + this.popPerBirth) < this.maxPop) {
                for (let n = 0; n < this.popPerBirth; n++) {
                        this.birth()
                }
        }
        
        // Core sequence: MOVE everything then DRAW everything
        App.move()
        App.draw()

        let time2 = performance.now()

}
App.birth = function () {
        let x = -800 + 1600 * Math.random(),
                y = -800 + 1600 * Math.random()
                
        let particle = {
                hue: 195 + 3 * Math.floor(3 * Math.random()),
                sat: 65 + 30 * Math.random(),
                lum: 15 + Math.floor(50*Math.random()),
                x,
                y,
                x.........完整代码请登录后点击上方下载按钮下载查看