用HTML5中的Canvas结合公式绘制粒子运动的教程

2020-04-22 06:42:08易采站长站整理

                    vy = (this.vy+ay*time)*0.97;   
    
                this.vx = vx;   
                this.vy = vy;   
    
            }else {   
                var gravity = 9.8;   
                var vy = this.vy+gravity*time;   
    
                if(this.y>canvas.height){   
                    vy = -vy*0.7;   
                }   
    
                this.vy = vy;   
            }   
        },   

粒子总共有两种状态,一种是自由落体,一种就是受到吸力。自由落体就不说了。说吸力之前先贴出粒子的属性:
 

JavaScript Code复制内容到剪贴板

var Dot = function(x,y,vx,vy,tox,toy,color){   
        this.x=x;   
        this.y=y;   
        this.vx=vx;   
        this.vy=vy;   
        this.nextox = tox;   
        this.nextoy = toy;   
        this.color = color;   
        this.visible = true;   
        this.globleDown = false;   
        this.setEnd(tox , toy);   
    }   
    
setEnd:function(tox , toy){   
                this.tox = tox;