canvas实现粒子三维空间旋转动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas实现粒子三维空间旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script> <script> console.clear(); document.addEventListener('DOMContentLoaded', function(){ let stats = new Stats(); stats.showPanel( 0 ); stats.domElement.style.position = 'absolute'; //let panel = stats.addPanel( new Stats.Panel( 'caption', '#ff8', '#221' ) ); // panel.update(value, maxValue); document.body.appendChild( stats.domElement ); /* i love DOM */ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); document.body.style.padding = '0px'; document.body.style.margin = '0px'; document.body.style.overflow = 'hidden'; /* i love full screen */ var w = canvas.width = window.innerWidth; var h = canvas.height = window.innerHeight; var ctx = canvas.getContext('2d'); /* i love bad short opts ^__^ like q or qwe */ var opts = { }; var gui = new dat.GUI(); function opt(name, value, min, max){ opts[name] = value; return gui.add(opts, name, min, max); } /* if code.before > ugly -> just.dont.read(below) // below worse... ==== let's begin. ==== */ class Snow{ constructor(ctx, count){ this.w = ctx.canvas.width; this.h = ctx.canvas.height; this.count = count; this.r = this.w * 1; this.particles = []; this.vel = [0.5,2,0]; this.a .........完整代码请登录后点击上方下载按钮下载查看
网友评论0