Particle Effect flashache Follow 2012-03-06 10:54:13 License: MIT License Fork0 Fav0 View327 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 123 lines HTML 3 lines CSS 1 lines Particle Effect with html5 canvas 我的微博：http://www.weibo.com/ias3 @flashache :-) Particle Effect function Particle() { this.x = 0; this.y = 0; this.dx = 0; this.dy = 0; this.vx = 0; this.vy = 0; this.size = 1; this.rotation = 0; this.mass = 1; this.fillColor; this.active = true; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 17 /*~ 1000/60*/); }); } var stage; var stageContext; // var cacheCanvas; // var cacheContext; var sourceImg; var holder = []; var MAX_NUM = 1000; var EMIT_NUM = 10; var count = 0; var mouse = {x: 0, y: 0}; function appLoadedHandler() { stage = document.getElementById("stage"); // cacheCanvas = document.createElement("canvas"); // cacheCanvas.width = stage.width; // cacheCanvas.height = stage.height; // cacheContext = cacheCanvas.getContext("2d"); stageContext = stage.getContext("2d"); stage.addEventListener('mousemove', function (event) { var x, y; if (event.pageX || event.pageY) { x = event.pageX; y = event.pageY; }else{ x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; } x -= stage.offsetLeft; y -= stage.offsetTop; mouse.x = x; mouse.y = y; }, false); (function onFrameLoop () { window.requestAnimationFrame(onFrameLoop, stage); for(var i = 0 ; i < EMIT_NUM ; i ++) { if(holder.length <= count) { var p = new Particle(); holder[holder.length] = p; }else{ p = holder[count]; } p.vx = 20 * (Math.random() - 0.5); p.vy = 20 * (Math.random() - 0.5); p.x = mouse.x; p.y = mouse.y; p.size = 1 + 4 * Math.random(); p.fillColor = '#' + (Math.random() * 0x404040 + 0xaaaaaa | 0).toString(16); p.active = true; count ++; if(count == MAX_NUM) count = 0; } stageContext.fillStyle = "rgba(8,8,12,.1)"; stageContext.fillRect(0, 0, stage.width, stage.height); for(i = 0, len = holder.length; i < len ; i ++) { p = holder[i]; if(p.active) { var lp = { x: p.x, y: p.y }; p.x += p.vx; p.y += p.vy; p.vx *= 0.98; p.vy *= 0.98; p.rotation += 0.01; if(p.y > stage.height){ p.active = false; }else{ stageContext.beginPath(); stageContext.fillStyle = p.fillColor; stageContext.strokeStyle = p.fillColor; stageContext.lineWidth = p.size; stageContext.moveTo(lp.x, lp.y); stageContext.lineTo(p.x, p.y); stageContext.stroke(); stageContext.arc(p.x, p.y, p.size * 0.5, 0, Math.PI*2, true); stageContext.fill(); } } } }()); } if(window.addEventListener) window.addEventListener('load', appLoadedHandler); <canvas id="stage" width="465" height="465" style="border: 1px solid #333333"> 你的浏览器不支持HTML5 Canvas，请使用IE 9+, Chrome 3+, Safari 3+, Opera 10+, FireFox 3+ </canvas> Particle Effect body { background-color: #DDDDDD; font: 30px sans-serif; } Particle Effect with html5 canvas 我的微博：http://www.weibo.com/ias3 @flashache :-) function Particle() { this.x = 0; this.y = 0; this.dx = 0; this.dy = 0; this.vx = 0; this.vy = 0; this.size = 1; this.rotation = 0; this.mass = 1; this.fillColor; this.active = true; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 17 /*~ 1000/60*/); }); } var stage; var stageContext; // var cacheCanvas; // var cacheContext; var sourceImg; var holder = []; var MAX_NUM = 1000; var EMIT_NUM = 10; var count = 0; var mouse = {x: 0, y: 0}; function appLoadedHandler() { stage = document.getElementById("stage"); // cacheCanvas = document.createElement("canvas"); // cacheCanvas.width = stage.width; // cacheCanvas.height = stage.height; // cacheContext = cacheCanvas.getContext("2d"); stageContext = stage.getContext("2d"); stage.addEventListener('mousemove', function (event) { var x, y; if (event.pageX || event.pageY) { x = event.pageX; y = event.pageY; }else{ x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; } x -= stage.offsetLeft; y -= stage.offsetTop; mouse.x = x; mouse.y = y; }, false); (function onFrameLoop () { window.requestAnimationFrame(onFrameLoop, stage); for(var i = 0 ; i < EMIT_NUM ; i ++) { if(holder.length <= count) { var p = new Particle(); holder[holder.length] = p; }else{ p = holder[count]; } p.vx = 20 * (Math.random() - 0.5); p.vy = 20 * (Math.random() - 0.5); p.x = mouse.x; p.y = mouse.y; p.size = 1 + 4 * Math.random(); p.fillColor = '#' + (Math.random() * 0x404040 + 0xaaaaaa | 0).toString(16); p.active = true; count ++; if(count == MAX_NUM) count = 0; } stageContext.fillStyle = "rgba(8,8,12,.1)"; stageContext.fillRect(0, 0, stage.width, stage.height); for(i = 0, len = holder.length; i < len ; i ++) { p = holder[i]; if(p.active) { var lp = { x: p.x, y: p.y }; p.x += p.vx; p.y += p.vy; p.vx *= 0.98; p.vy *= 0.98; p.rotation += 0.01; if(p.y > stage.height){ p.active = false; }else{ stageContext.beginPath(); stageContext.fillStyle = p.fillColor; stageContext.strokeStyle = p.fillColor; stageContext.lineWidth = p.size; stageContext.moveTo(lp.x, lp.y); stageContext.lineTo(p.x, p.y); stageContext.stroke(); stageContext.arc(p.x, p.y, p.size * 0.5, 0, Math.PI*2, true); stageContext.fill(); } } } }()); } if(window.addEventListener) window.addEventListener('load', appLoadedHandler); <canvas id="stage" width="465" height="465" style="border: 1px solid #333333"> 你的浏览器不支持HTML5 Canvas，请使用IE 9+, Chrome 3+, Safari 3+, Opera 10+, FireFox 3+ </canvas> body { background-color: #DDDDDD; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Particle Effect with html5 canvas 我的微博：http://www.weibo.com/ias3 @flashache :-) Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author flashache URLhttp://www.flashache.com Flash & HTML5 developer Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/sHcI/js"></script> animation art&design html5 html5_elements&api particle Tweet Twitter Discussion Questions on this code? Tags animation art&design html5 html5_elements&api particle
