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 相关文章推荐
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 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微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
基于Python绘制个人足迹地图
2020/06/01 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
深入了解Python enumerate和zip
2020/07/16 Python
python中Django文件上传方法详解
2020/08/05 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
年会主持人开场白台词
2015/05/29 职场文书