介绍
小编给大家分享一下帆布如何做出黑色背景带特效碎屑烟花,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
& lt;帆布id=癱as"风格=?
背景颜色
:rgba(1) 0、5、24日,“宽度=?235”;身高=?80“祝辞浏览器不支持canvas & lt; div类=癱ity"比;
& lt; img src=https://www.yisu.com/zixun/眂ity.png“alt=" "> 
新年快乐
阖家欢乐
万事如意
心想事成
css
{身体,,保证金:0;,,填充:0;,,溢出:隐藏的;
}。{城市,,宽度:100%;,,位置:固定;,,底部:0 px;,,z - index: 100;
}。城市img {,,宽度:100%;
},,
js
var帆布=. getelementbyid (“cas"); var亚奥理事会=document.createElement (“canvas"); var octx=ocas.getContext (“2 d"); var ctx=canvas.getContext (“2 d");
亚奥理事会。宽度=画布。宽度=window.innerWidth;
亚奥理事会。身高=画布。身高=window.innerHeight; var bigbooms=[];窗口。onload=function () {
initAnimate ()
}函数initAnimate () {
drawBg ();
lastTime=new日期();
动画();
动画(){}var lastTime;函数
ctx.save ();
ctx。fillStyle=皉gba(0.1 0、5、24日)“;
ctx。fillRect(0, 0,画布。宽度,canvas.height);
ctx.restore ();var新=new日期();如果(新- lastTime祝辞500 +(窗口。随机innerHeight - 767)/2) {var=math . random() * 100比;2呢?真:假;var x=getRandom(画布。宽/5,画布。宽度* 4/5);var y=getRandom (200);如果(随机){var bigboom=新繁荣(getRandom(画布。宽/3,画布。宽* 2/3),2,“# FFF", {x, x, y, y
});
bigbooms.push (bigboom)
其他}{var bigboom=new繁荣(getRandom(画布。宽/3,画布。宽* 2/3),2,“# FFF", {x:画布。宽/2,y: 200
},document.querySelectorAll (“.shape")[方法(getRandom(0,文档。querySelectorAll (“.shape") . length))));
bigbooms.push (bigboom)
}
lastTime=新时期;
}
星星。foreach(函数(){this.paint ();
}）
drawMoon ();
bigbooms。foreach(函数(指数){var=这个;如果(! this.dead) {this._move ();this._drawLight ();
}{this.booms。foreach(函数(指数){如果(! this.dead) {this.moveTo(指数);
如果(指数===that.booms}其他。长度- 1){
bigbooms [bigbooms.indexOf()]=零;
}
}）
}
});
英国皇家空军(动画);
月球}函数drawMoon () {var=. getelementbyid (“moon");var centerX=画布。宽度- 200,
centerY=100,
宽度=80;如果(moon.complete) {
ctx。drawImage(月亮,centerX centerY、宽度、宽度)
其他}{
月球。onload=function () {
ctx。drawImage(月亮,centerX centerY、宽度、宽度)
}
}var指数=0;(var=0;我& lt;10;我+ +){
ctx.save ();
ctx.beginPath ();
ctx。弧(centerX +宽/2,centerY +宽/2,宽/2 +指数(0,2 * Math.PI);
ctx。fillStyle=皉gba (240219120, 0.005)“;
指数+=2;
ctx.fill ();
ctx.restore ();
}
}Array.prototype。foreach=函数(回调){(var=0;我& lt;this.length;我+ +){如果(这[我]!==null)的回调函数。应用(这[我],[我])
}
}var raf=窗口。requestAnimationFrame | |窗口。webkitRequestAnimationFrame | |窗口。mozRequestAnimationFrame | |窗口。oRequestAnimationFrame | |窗口。msRequestAnimationFrame | |函数(回调){窗口。setTimeout(回调,1000/60);
};
画布。onclick=function () {var x=event.clientX;var y=event.clientY;var bigboom=新繁荣(getRandom(画布。宽/3,画布。宽* 2/3),2,“# FFF", {x, x, y, y
});
bigbooms.push (bigboom)
}var繁荣=函数(x, r、c、boomArea、形状){。繁荣=[];这一点。x=x;这一点。y=(画布。身高+ r);这一点。r=r;这一点。c=c;这一点。形状形状=| |假;这一点。boomArea=boomArea;这一点。θ=0;this.dead=false;这一点。英航=方法(getRandom (80、200));
}
繁荣。原型={_paint:函数(){
ctx.save ();
ctx.beginPath ();
ctx.arc(这一点。x,这。y。r, 0, 2 * Math.PI);
ctx。fillStyle=this.c;
ctx.fill ();
ctx.restore ();
},_move:函数(){var dx=this.boomArea。x - this.x,
dy=this.boomArea。y - this.y;这一点。x= + dx * 0.01;这一点。y= + dy * 0.01;如果(Math.abs (dx) & lt;=Ｓ⒑?,Math.abs (dy) & lt;如果(this.shape)=this.ba) {{this._shapBoom ();
}其他this._boom ();this.dead=true;
其他}{this._paint ();
}
(){},_drawLight:函数
ctx.save ();
ctx。fillStyle=皉gba (255228150, 0.3)“;
ctx.beginPath ();
ctx.arc(这一点。x,这。y。null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
