纯js canvas粒子发射器效果可修改参数
代码语言:html
所属分类:粒子
代码描述:纯js编写,canvas渲染,可修改粒子大小、延迟时间、距离等
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /******************** Common ********************/ html, body { height: 100%; width: 100%; font-family: Helvetica, verdana, monospace; color: #FFFFFF; font-size: 100%; padding: 0; margin: 0; letter-spacing: 0.2rem; overflow: hidden; background: #000; } a { color: #FFF; text-decoration: none; } h1 { font-size: 1.6rem; } p { padding: 0.8rem 0; font-size: 0.8rem; } div#main { position: absolute; top: 0; left: 0; padding: 1.6rem; } /******************** Contents ********************/ canvas#canvas { background: #000; } div#controller { display: none; height: 100%; position: absolute; top: 0; right: 0; background: #0871BC; opacity: 0.9; overflow-y: scroll; z-index: 3; } div#controller > dl { padding: 0 1.6rem; } p#closeController { padding: 1.6rem; } p#openController { background: #0871BC; position: fixed; right: 0; left: 0; bottom: 1.6rem; margin: auto; width: 200px; text-align: center; z-index: 2; } </style> </head> <body translate="no"> <div id="contents"> <canvas id="canvas">This browser cannot use a canvas.</canvas> <p id="openController"><a href="#">修改参数</a></p> <div id="controller"> <p id="closeController"><a href="#">关闭</a></p> <dl> <dt> <p>Number of Shapes</p> </dt> <dd> <input type="range" id="numberOfShapes" min="1" max="1440" value="720" step="1"> </dd> <dt> <p>Shape Max Size</p> </dt> <dd> <input type="range" id="shapeMaxSize" min="1" max="500" value="50" step="1"> </dd> <dt> <p>Distance</p> </dt> <dd> <input type="range" id="distance" min="1" max="5" value="2" step="1"> </dd> <dt> <p>Delay</p> </dt> <dd> <input type="range" id="delay" min="1" max="1000" value="10" step="1"> </dd> </dl> </div> </div> <script> (function () { 'use strict'; window.addEventListener('load', function () { var canvas = document.getElementById('canvas'); if (!canvas || !canvas.getContext) { return false; } /******************** Random Number ********************/ function rand(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } /******************** Var ********************/ // canvas var ctx = canvas.getContext('2d'); var X = canvas.width = window.innerWidth; var Y = canvas.height = window.innerHeight; // controller var inputs = document.getElementsByTagName('input'); var shapeMaxSize = document.getElementById('shapeMaxSize'); var distance = document.getElementById('distance'); var numberOfShapes = document.getElementById('numberOfShapes'); var delay = document.getElementById('delay'); /******************** Animation ********************/ window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (cb) { setTimeout(cb, 17); }; /******************** Shape ********************/ // var var shapeNum = numberOfShapes.value; var shapes = []; var polygons = [0, 3, 4, 5]; var composite = ['lighter', 'xor']; var delayNum = delay.value; var shapePushIntId; function Shape(ctx, x, y, r, a) { this.ctx = ctx; this.init(x, y, r, a); } Shape.prototype.init = function (x, y, r, a) { this.poly = polygons[rand(0, polygons.length - 1)]; this.comp = composite[rand(0, composite.length - 1)]; this.rad = Math.PI / this..........完整代码请登录后点击上方下载按钮下载查看
网友评论0