canvas焰火特效
之前在抖音上看到了一个很漂亮的焰火效果。这会儿有时间就用canvas实现了一下。
演示地址:http://suohb.com/work/firework4.htm
先看效果:(静态图片看不太出效果,请直接查看演示地址,考验电脑CPU的时候到了)
实现原理:
焰火特效运用到的物理知识就是抛物线运动。
看起来很复杂的焰火实际上就是一条条的抛物线。
从一个中心点向四周方向抛出一个质点。将质点的轨迹画出来,就是焰火效果了。
//每一个质点对象
1 var obj = {
x: x,//当前X坐标
y: y,//当前Y坐标
sx: Math.cos(deg)*curSpeed,//X轴方向速度
sy: Math.sin(deg)*curSpeed,//Y轴方向速度
len: len + level*10*Math.random(),//焰火显示长度(这么多质点连接起来)
limit: limit + level*10*Math.random(),//质点移动最大步数
color: color,//焰火颜色
level: level,//焰火等级(因为特效是二级焰火,可以做多级)
list:[{x:x,y:y}]//质点轨迹(将这些轨迹连起来就是焰火的其中一条线)
};
//向360度方向生成一批质点,形成一个焰火元素
1 function addFire(x,y,color,level){
curLevel = level ;
var lineLen = 10+level*20 + Math.random()*10,
deg ,
speed = 1 + Math.random()*level*.4 ,
len = 15 + Math.random()*level*6,
limit = len + 4 + Math.random()*level;
for(var i = 0 ; i < lineLen ; i ++){
deg = i*(Math.PI*2/lineLen)+Math.random() ;
var curSpeed = speed + Math.random();
var obj = 质点对象
list.push(obj);
}
}
//更新质点位置,并将新位置插入质点轨迹之中
1 function reviewFire(){
for(var i = 0 ; i <list.length ; i++){
let obj = list[i];
obj.x += obj.sx ;
obj.y += obj.sy ;
obj.sy += G ;//抛物运动中的重力加速度
obj.list.push({x:obj.x,y:obj.y});
obj.list = obj.list.slice(-obj.len);
}
}
//画出轨迹即可
1 function drawFire(){
cxt.clearRect(0,0,pageWidth,pageHeight);
var obj ;
for(var i = 0 ; i < list.length ; i ++){
obj = list[i] ;
cxt.beginPath();
for(var j = 0 ; j < obj.list.length ; j++){
if(i == 0)
cxt.moveTo(obj.list[j].x ,obj.list[j].y);
else{
cxt.lineTo(obj.list[j].x ,obj.list[j].y);
}
}
cxt.strokeStyle = obj.color ;
cxt.lineWidth = obj.level ;
cxt.stroke();
}
}
完整代码:
<!doctype html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>焰火特效-长按二维码关注公众号,了解更多特效</title>
<style type="text/css">
html{
height: 100%;
}
html,body,ul,li,canvas{
margin: 0;
padding: 0;
} </style>
</head>
<body bgcolor="#000000">
<canvas id="knife"></canvas>
<img src="../images/qr.jpg" style="position:fixed;bottom:0;width:100px;height:100px;right:0;">
</body>
<script>
var canvas = document.getElementById("knife");
canvas.style.position = "absolute" ;
canvas.style.top = 0 ;
var pageWidth = window.innerWidth ;
var pageHeight = window.innerHeight ;
canvas.width = window.innerWidth ;
canvas.height = window.innerHeight ;
var cxt = canvas.getContext("2d");
var list = [] ;
var G = 0.036 ;
var colors = ["#8b008b","#ff69b4","#7fff00","#1e90ff","#00bfff","#0FF","#7cfc00","#ffd700","#ffdead","#f00"];
var curLevel = 0 ;
var curColor = 0 ; function addFire(x,y,color,level){
curLevel = level ;
var lineLen = 10+level*20 + Math.random()*10,
deg ,
speed = 1 + Math.random()*level*.4 ,
len = 15 + Math.random()*level*6,
limit = len + 4 + Math.random()*level;
for(var i = 0 ; i < lineLen ; i ++){
deg = i*(Math.PI*2/lineLen)+Math.random() ;
var curSpeed = speed + Math.random();
var obj = {
x: x,
y: y,
sx: Math.cos(deg)*curSpeed,
sy: Math.sin(deg)*curSpeed,
len: len + level*10*Math.random(),
limit: limit + level*10*Math.random(),
color: color,
level: level,
list:[{x:x,y:y}]
};
list.push(obj);
}
}
function reviewFire(){
for(var i = 0 ; i <list.length ; i++){
let obj = list[i];
obj.x += obj.sx ;
obj.y += obj.sy ;
obj.sy += G ;
obj.list.push({x:obj.x,y:obj.y});
obj.list = obj.list.slice(-obj.len);
}
}
function drawFire(){
cxt.clearRect(0,0,pageWidth,pageHeight);
var obj ;
for(var i = 0 ; i < list.length ; i ++){
obj = list[i] ;
cxt.beginPath();
for(var j = 0 ; j < obj.list.length ; j++){
if(i == 0)
cxt.moveTo(obj.list[j].x ,obj.list[j].y);
else{
cxt.lineTo(obj.list[j].x ,obj.list[j].y);
}
}
cxt.strokeStyle = obj.color ;
cxt.lineWidth = obj.level ;
cxt.stroke();
}
}
function step(){
if(curLevel == 1 && list.length == 0){
addFire(pageWidth/2,100,colors[curColor ++ % colors.length],2);
}
reviewFire();
drawFire();
requestAnimationFrame(step)
}
requestAnimationFrame(step)
addFire(pageWidth/2,100,colors[curColor ++ % colors.length],2);
</script>
</html>
了解更多特效,请关注我的微信公众号:
canvas焰火特效的更多相关文章
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 分享8款令人惊叹的HTML5 Canvas动画特效
HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 几十行js实现很炫的canvas交互特效
几十行js实现很炫的canvas交互特效 废话不多说,先上效果图! 本篇文章的示例代码都是抄的一个叫Franks的老外在yutube上的一个教学视频,他还出了很多关于canvas的视频,十分值得学习, ...
- html5 canvas 粒子特效
不知不觉就已经好久没写过博客了,自从七月正式毕业后,离开了实习了将近九个月的老东家,进了鼠厂后,做的事都是比较传统的前端活,之前在tpy的时候只管做移动h5的特效以及小游戏,再加上实习所以时间比较充裕 ...
- canvas百分百特效
这个特效是别的人,非原创.原创地址 http://blog.csdn.net/lecepin/article/details/53536445 背后的水是可以动的 代码我再研究了下,下面是加了注释的代 ...
- canvas雪花特效-jQuery插件实现
这是一款效果十分逼真的html5 canvas下雪场景动画特效插件.这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的.在Snowfall jquer ...
- canvas入门级基本用法实现雨滴下落特效
canvas基础知识点参考各种文档,直接上代码,有非常详细注释 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
随机推荐
- Vue中,父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- User Parameters(用户参数)
User Parameters(用户参数),这个是整个zabbix的重点 Zabbix有很多内置的itemkey,但是这些key都是由Zabbix定义好的比较通用的监控项的实现, 如果我们自己想实 ...
- 阿里云学习之IOT物联网套件(配置篇)
文档时间:2018.-1-24 首注:此文章是参照以下文章的整合与补充: https://bbs.aliyun.com/read/309106.html?amp;displayMode=1&p ...
- “茴”字有四种写法,this也是一样
说到这个地方又想起以前高中还是初中学的<孔乙己>这个梗,但是这里的this显然实用性比那个要大很多,哈哈. 简单来说,this有四种应用场景,分别是在构造函数上.对象属性中.普通函数中.c ...
- 洛谷P4014 分配问题【最小/大费用流】题解+AC代码
洛谷P4014 分配问题[最小/大费用流]题解+AC代码 题目描述 有 n 件工作要分配给 n 个人做.第 i 个人做第 j 件工作产生的效益为c ij. 试设计一个将 n 件工作分配给 n 个人做的 ...
- C预处理器和C库
#define #include #undef #ifdef #else #endif #if #elif #else #endif 预处理宏: p463 _ _fun_ _是预定义标识符(函数作用域 ...
- [译]前端JS面试题汇总 Part 1(事件委托/this关键字/原型链/AMD与CommonJS/自执行函数)
原文:https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questio ...
- 解决 java.lang.ClassNotFoundException: org.springframework.beans.factory.config.EmbeddedValueResolver
1.今天用maven配置了一下dubbo的项目发现启动项目后意外报错: java.lang.ClassNotFoundException: org.springframework.beans.fact ...
- 接口-以PHP为例
<?php //使用程序模拟现实情况 //使用规范(方法/属性) interface iUSB { public function start(); public function stop() ...
- hihoCoder1310 岛屿 (dfs)
思路:首先dfs求得所有联通块,再搜索的同时把每个联通块的坐标都保存下来,然后把每个联通块处理一下–首先得到某个联通块的最小横坐标和纵坐标,然后让每个坐标去减去这个横坐标和纵坐标.相当于使得所有联通块 ...