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中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
SVG实现时钟效果
2018/07/17 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
Python出现segfault错误解决方法
2016/04/16 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python 内置模块详解
2019/01/01 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
python字典的值可以修改吗
2020/06/29 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
三个Unix的命令面试题
2015/04/12 面试题
市场营销职业生涯规划书范文
2014/01/12 职场文书
大学军训感言1500字
2014/03/09 职场文书
项目建议书格式
2014/03/12 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
班组拓展活动方案
2014/08/14 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
机器人总动员观后感
2015/06/09 职场文书
远程教育学习心得体会
2016/01/23 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis