html5使用canvas实现跟随光标跳动的火焰效果


Posted in HTML / CSS onJanuary 07, 2014

本效果的完整代码如下,把代码保存到HTML文件中打开也能查看效果,火焰会跟随光标:

复制代码
代码如下:

<!DOCTYPE HTML>
<head>
<meta charset=utf-8" />
<title>HTML5 Canvas火焰效果</title>
<style type="text/css">
body{margin: 0; padding: 0;}
#canvas-keleyi-com {display: block;}
</style>
</head>
<body>
<canvas id="canvas-keleyi-com"></canvas>
<script type="text/javascript">
window.onload = function(){
var keleyi_canvas = document.getElementById("canvas-kel"+"eyi-com");
var ctx = keleyi_canvas.getContext("2d");
var W = window.innerWidth, H = window.innerHeight;
keleyi_canvas.width = W;
keleyi_canvas.height = H;</p> <p>var particles = [];
var mouse = {};</p> <p>//Lets create some particles now
var particle_count = 100;
for(var i = 0; i < particle_count; i++)
{
particles.push(new particle());
}
keleyi_canvas.addEventListener('mousemove', track_mouse, false);</p> <p>function track_mouse(e)
{
mouse.x = e.pageX;
mouse.y = e.pageY;
}</p> <p>function particle()
{
this.speed = {x: -2.5+Math.random()*5, y: -15+Math.random()*10};
//location = mouse coordinates
//Now the flame follows the mouse coordinates
if(mouse.x && mouse.y)
{
this.location = {x: mouse.x, y: mouse.y};
}
else
{
this.location = {x: W/2, y: H/2};
}
//radius range = 10-30
this.radius = 10+Math.random()*20;
//life range = 20-30
this.life = 20+Math.random()*10;
this.remaining_life = this.life;
//colors
this.r = Math.round(Math.random()*255);
this.g = Math.round(Math.random()*255);
this.b = Math.round(Math.random()*255);
}</p> <p>function draw()
{
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillRect(0, 0, W, H);
ctx.globalCompositeOperation = "lighter";</p> <p>for(var i = 0; i < particles.length; i++)
{
var p = particles[i];
ctx.beginPath();
p.opacity = Math.round(p.remaining_life/p.life*100)/100
var 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> <p>
p.remaining_life--;
p.radius--;
p.location.x += p.speed.x;
p.location.y += p.speed.y;</p> <p>if(p.remaining_life < 0 || p.radius < 0)
{
particles[i] = new particle();
}
}
}</p> <p>setInterval(draw, 86);
}
</script>
</body>
</html>
HTML / CSS 相关文章推荐
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 #HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 #HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 #HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 #HTML / CSS
html5 css3网站菜单实现代码
Dec 23 #HTML / CSS
html5 自定义播放器核心代码
Dec 20 #HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 #HTML / CSS
You might like
PHP Web木马扫描器代码分享
2015/09/06 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
简单介绍Python中的floor()方法
2015/05/15 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
python实现彩票系统
2020/06/28 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
旅游管理毕业生自荐书
2014/02/02 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
护士个人总结范文
2015/02/13 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫