介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head lang=癳n"祝辞
,& lt; meta charset=癠TF-8"比;
,& lt; title> & lt;/title>
,& lt; style>
*,{才能
,,,保证金:0;
,,,填充:0;
,,}
,,html, body {
,,,宽度:100%;
,,,身高:100%;
,,,背景颜色:黑色;
,,,溢出:隐藏;
,,}
,& lt;/style>
& lt;/head>
& lt; body>
& lt; canvas id=癱anvas"祝辞& lt;/canvas>
& lt; script>
,var canvas =, . getelementbyid (“canvas");=,,canvas.width window.innerWidth;=,,canvas.height window.innerHeight;
,var content2d =, canvas.getContext (“2 d");
,var balls =,[];,//存储对象
,//小球的基本属性
,function 球(),{
时间=this.x 才能;零;
时间=this.y 才能;零;
时间=this.angle 才能;零;
this.vx才能=零;
this.vy才能=零;
时间=this.r 才能;零;
时间=this.color 才能;零;
时间=this.init 才能;function (x, y), {
,,//初始化属性值
,,this.x =, x;
,,this.y =, y;
,,//随机角度
,,this.angle =, math . random (), *, Math.PI *, 2;
,,//随机小球的大小
,,this.r =, this.randomNum (10、25);
,,this.vx=(this.randomNum (6、12) + math . random () * 0.5) * Math.cos (this.angle);
,,this.vy=(this.randomNum (6、12) + math . random () * 0.5) * sin (this.angle);
,,this.color =, this.randomColor ();
,,};//才能随机小球颜色
时间=this.randomColor 才能;function (), {
,,return “#”, +,方法(math . random (), *, 16777216) .toString (16);
,,};//才能随机大小
时间=this.randomNum 才能;function (最小值,最大值),{
,,return math . random (), *, max +,最小值;
,,};//才能重绘时需移动
this.move才能=function () {
,,this.x +=this.vx;
,,this.y +=this.vy;
,,this.r -=0.3;
,,this.vx *=0.93;
,,this.vy *=0.93;
,,}
,}
,//创建小球
,function createBall (x, y), {
var 才能;count =,方法(math . random (), *, 30, +, 10);
for 才能;(var 小姐:=,0;,小姐:& lt;,计数;,我+ +),{
,,var b =, new 球();
,,b.init (x, y);
,,balls.push (b);
,,}
,}
,//画小球
,function 画(){
,,(var 我=0;i
& lt;/body>
& lt;/html>
这篇文章给大家分享的是有关JS怎么实现烟花爆炸效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
具体内容如下
感谢各位的阅读!关于“JS怎么实现烟花爆炸效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
