七夕表白，不给女朋友来场炫酷的烟花？

canvas + JS 炫酷实现烟花效果

一、效果图

二、代码

1、创建画布

<canvas id="canvas">Canvas is not supported in your browser.</canvas>

2、浏览器兼容

window.requestAnimFrame=(function(){
    
    
	return window.requestAnimationFrame||
		window.webkitRequestAnimationFrame||
		window.mozRequestAnimationFrame||
		function(callback){
    
    
			window.setTimeout(callback,1000/60)
			}
	})();

3、创建烟花对象

function Firework(sx,sy,tx,ty){
    
    
    this.x=sx;
    this.y=sy;
    this.sx=sx;
    this.sy=sy;
    this.tx=tx;
    this.ty=ty;
    //计算发射点和绽放点的距离
    this.distanceToTarget=calculateDistance(sx,sy,tx,ty);
    //运动距离
    this.distanceTraveled=0;
    //生成的运动轨迹
    this.coordinates=[];
    this.coordinateCount=3;
    while(this.coordinateCount--){
    
    
        this.coordinates.push([this.x,this.y])
    }
    this.angle=Math.atan2(ty-sy,tx-sx);
    this.speed=2;
    this.acceleration=1.05;
    this.brightness=random(50,70);//烟花的亮度
    this.targetRadius=1//烟花圈的半径
}

4、更新烟花位置

Firework.prototype.update=function(index){
    
    
    this.coordinates.pop();
    this.coordinates.unshift([this.x,this.y]);
    if(this.targetRadius<8){
    
    
        this.targetRadius+=0.3
    }else{
    
    
        this.targetRadius=1
    }
    this.speed*=this.acceleration;
    var vx=Math.cos(this.angle)*this.speed,
        vy=Math.sin(this.angle)*this.speed;
    this.distanceTraveled=calculateDistance(this.sx,this.sy,this.x+vx,this.y+vy);
    //如果烟花运行距离大于或等于初始位置到目标位置之间的距离，生成新烟花并移除当前烟花，否则更新烟花位置
    if(this.distanceTraveled>=this.distanceToTarget){
    
    
        //烟花绽放
        createParticles(this.tx,this.ty);
        //销毁烟花点
        fireworks.splice(index,1)
    }else{
    
    
        this.x+=vx;this.y+=vy
    }
};

5、烟花射线发射效果

Firework.prototype.draw=function(){
    // 重新开始新路径，把之前的路径都清空掉
    ctx.beginPath();
    //先保存一个坐标
    ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]);
    //从moveTo提供的坐标绘制到指定坐标
    ctx.lineTo(this.x,this.y);
    //设置线条样式
    ctx.strokeStyle="hsl("+hue+", 100%, "+this.brightness+"%)";
    //通过此函数将以上绘制的图形绘制到画布上
    ctx.stroke();
    ctx.beginPath();
    //画出鼠标点击时的圆圈
    //arc(圆心的x坐标，圆心的y坐标，圆的半径，起始角（以弧度计，即l圆心的3点钟位置是0度），结束角，规定应该是顺时针还是逆时针画图(可选))
    ctx.arc(this.tx,this.ty,this.targetRadius,0,Math.PI*2);
    //描边绘制
    ctx.stroke()
};

6、烟花粒子绽放方法定义

function Particle(x,y){
    
    
    this.x=x;this.y=y;this.coordinates=[];
    this.coordinateCount=5;
    while(this.coordinateCount--){
    
    
        this.coordinates.push([this.x,this.y])
    }
    // 往各个角度绽放
    this.angle=random(0,Math.PI*2);
    this.speed=random(1,10);
    this.friction=0.95;
    this.gravity=1;
    this.hue=random(hue-20,hue+20);
    this.brightness=random(50,80);
    this.alpha=1;
    this.decay=random(0.015,0.03);//粒子消失时间（透明度增加速度）
}

7、烟花粒子绽放

// 烟花绽放	
Particle.prototype.draw=function(){
    
    
    ctx.beginPath();
    ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]);
    ctx.lineTo(this.x,this.y);
    //烟花的颜色
    ctx.strokeStyle="hsla("+this.hue+", 100%, "+this.brightness+"%, "+this.alpha+")";
    ctx.stroke()
};

三、完整代码

1、GitHub地址直接复制：

https://github.com/yongtaozheng/html-css-js-Achieve-cool-results.git

2、个人博客

http://47.113.84.128:8090/