html5火焰动画cavans
来源:互联网 发布:hpm128fw扫描软件 编辑:程序博客网 时间:2024/04/28 18:38
<!DOCTYPE html><html><head><title>canvas火焰</title><style type="text/css">body {background: rgb(36, 36, 36);text-align: center;}#fire {width: 100%;height: 100%;}</style></head><body><canvas id="fire" width="" height=""></canvas><script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><script type="text/javascript">$(document).ready(function() {var space = document.getElementById("fire");var ctx = space.getContext("2d");var particles = [];var particle_count = 150;for(var i = 0; i < particle_count; i++) {particles.push(new particle());}var time = 0;var canvasWidth = 320;var canvasHeight = 480;$(".wrapper").css({width: canvasWidth,height: canvasHeight});$("#fire").css({width: canvasWidth,height: canvasHeight});window.requestAnimFrame = (function() {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {window.setTimeout(callback, 6000 / 60);};})();function particle() {this.speed = {x: -1 + Math.random() * 2,y: -5 + Math.random() * 5};canvasWidth = (document.getElementById("fire").width);canvasHeight = (document.getElementById("fire").height);this.location = {x: canvasWidth / 2,y: (canvasHeight / 2) + 35};this.radius = 0.5 + Math.random() * 1;this.life = 10 + Math.random() * 10;this.death = this.life;this.r = 255;this.b = 0;this.g = Math.round(Math.random() * 52);}function ParticleAnimation() {ctx.globalCompositeOperation = "source-over";ctx.fillStyle = "rgb(36,36,36)";ctx.fillRect(0, 0, canvasWidth, canvasHeight);ctx.globalCompositeOperation = "lighter";for(var i = 0; i < particles.length; i++) {var p = particles[i];ctx.beginPath();p.opacity = Math.round(p.death / p.life * 100) / 100var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);gradient.addColorStop(0, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");gradient.addColorStop(0.5, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");gradient.addColorStop(1, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", 0)");ctx.fillStyle = gradient;ctx.arc(p.location.x, p.location.y, p.radius, Math.PI * 2, false);ctx.fill();p.death--;p.radius++;p.location.x += (p.speed.x);p.location.y += (p.speed.y);if(p.death < 0 || p.radius < 0) {particles[i] = new particle();}}requestAnimFrame(ParticleAnimation);}ParticleAnimation();});</script></body></html>
0 0
- html5火焰动画cavans
- HTML5 Cavans(10) 简单动画:摆动
- HTML5 Cavans(11) 简单动画:圆周运动
- HTML5 Cavans(12) 简单动画:反弹
- HTML5 Canvas火焰闪烁动画 火焰跟随鼠标
- HTML5 cavans的使用
- HTML5 Cavans(8) 图像
- Cavans时钟动画
- 火焰动画
- HTML5 Cavans(9) 像素处理
- Html5 Cavans 整理笔记之填充样式
- Html5 Cavans之高级内容上篇
- HTML5 Cavans在Chrome浏览器下绘图闪屏解决方法
- 火焰
- 纯CSS3绘制打火机动画火焰特效
- cavans刮奖
- UGUI-Cavans
- HTML5 动画
- 翻书效果
- 运行Dump文件,查看问题
- MyEclipse+Tomcat+MAVEN+SVN项目完整环境搭建
- iOS int 转NSNumber NSString转int
- 算法系列—回溯法
- html5火焰动画cavans
- 深入ASM源码之ClassReader、ClassVisitor、ClassWriter
- 大数据问题
- Javascript运行环境异步机制
- android代码混淆的使用说明
- Android系统完整显示壁纸, 不做X2拉伸处理
- 第十一周OJ7趣味取小数
- Lucene 入门详解
- Rxjava+ReTrofit+okHttp深入浅出