Tổng hợp hiệu ứng pháo hoa cho blogspot nền đen

Tổng hợp hiệu ứng pháo hoa cho blogspot nền đen
Bài trước đã tổng hợp được một ít hiệu ứng pháo hoa đẹp cho blogspot với cả nền tối và nền sáng để anh em dùng nhân dịp tết nguyên đán Đinh Dậu 2017 trong bối cảnh không bắn pháo hoa để tiết kiệm ngân sách hỗ trợ đồng bào vùng lũ.
Không bắn thì nghĩ cũng tiếc nên tiện đây cung cấp cho anh em ít pháo hoa để anh em bém trong blogspot,trên tinh thần hỗ trợ tới tận nơi để anh em từ miền xuôi tới miền ngược đều có thể bắn cho cháy blog thì thôi.
Bài này cung cấp pháo hoa cho blogspot có nền đen tối dạng như thiên địa chấm jv để anh em xài cho đã.

Xem thử một hiệu ứng trên blogspot

DEMO

Hiệu ứng pháo hoa 1

CÀI ĐẶT
Bước 1:
Thêm vào trước thẻ </head> đoạn code sau
<style type='text/css'>
canvas{
position:fixed;
width:100%;
height:100%;
background:#000;
display:block;
</style>
<canvas id='canvas'/>
Bước 2:
Thêm javascript sau vào trước thẻ </body>
<script type='text/javascript'>
//<![CDATA[
window.addEventListener("resize", resizeCanvas, false);
        window.addEventListener("DOMContentLoaded", onLoad, false);
        
        window.requestAnimationFrame = 
            window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     ||  
            function (callback) {
                window.setTimeout(callback, 1000/60);
            };
        
        var canvas, ctx, w, h, particles = [], probability = 0.04,
            xPoint, yPoint;
        
        
        
        
        
        function onLoad() {
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");
            resizeCanvas();
            
            window.requestAnimationFrame(updateWorld);
        } 
        
        function resizeCanvas() {
            if (!!canvas) {
                w = canvas.width = window.innerWidth;
                h = canvas.height = window.innerHeight;
            }
        } 
        
        function updateWorld() {
            update();
            paint();
            window.requestAnimationFrame(updateWorld);
        } 
        
        function update() {
            if (particles.length < 500 && Math.random() < probability) {
                createFirework();
            }
            var alive = [];
            for (var i=0; i<particles.length; i++) {
                if (particles[i].move()) {
                    alive.push(particles[i]);
                }
            }
            particles = alive;
        } 
        
        function paint() {
            ctx.globalCompositeOperation = 'source-over';
            ctx.fillStyle = "rgba(0,0,0,0.2)";
            ctx.fillRect(0, 0, w, h);
            ctx.globalCompositeOperation = 'lighter';
            for (var i=0; i<particles.length; i++) {
                particles[i].draw(ctx);
            }
        } 
        
        function createFirework() {
            xPoint = Math.random()*(w-200)+100;
            yPoint = Math.random()*(h-200)+100;
            var nFire = Math.random()*50+100;
            var c = "rgb("+(~~(Math.random()*200+55))+","
                 +(~~(Math.random()*200+55))+","+(~~(Math.random()*200+55))+")";
            for (var i=0; i<nFire; i++) {
                var particle = new Particle();
                particle.color = c;
                var vy = Math.sqrt(25-particle.vx*particle.vx);
                if (Math.abs(particle.vy) > vy) {
                    particle.vy = particle.vy>0 ? vy: -vy;
                }
                particles.push(particle);
            }
        } 
        
        function Particle() {
            this.w = this.h = Math.random()*4+1;
            
            this.x = xPoint-this.w/2;
            this.y = yPoint-this.h/2;
            
            this.vx = (Math.random()-0.5)*10;
            this.vy = (Math.random()-0.5)*10;
            
            this.alpha = Math.random()*.5+.5;
            
            this.color;
        } 
        
        Particle.prototype = {
            gravity: 0.05,
            move: function () {
                this.x += this.vx;
                this.vy += this.gravity;
                this.y += this.vy;
                this.alpha -= 0.01;
                if (this.x <= -this.w || this.x >= screen.width ||
                    this.y >= screen.height ||
                    this.alpha <= 0) {
                        return false;
                }
                return true;
            },
            draw: function (c) {
                c.save();
                c.beginPath();
                
                c.translate(this.x+this.w/2, this.y+this.h/2);
                c.arc(0, 0, this.w, 0, Math.PI*2);
                c.fillStyle = this.color;
                c.globalAlpha = this.alpha;
                
                c.closePath();
                c.fill();
                c.restore();
            }
        }
//]]>
</script>

Hiệu ứng pháo hoa 2

Bước 1:
Thêm vào trước thẻ </head> đoạn code sau
<style type='text/css'>
canvas{
position:fixed;
width:100%;
height:100%;
background:#000;
display:block;
</style>
<canvas id='c'/>
Bước 2
Thêm javascript sau vào trước thẻ </body>
<script type='text/javascript'>
//<![CDATA[
window.onload = function(argument) {
 var request = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function(cb) { return setTimeout(cb, 30) };  w = window.innerWidth, h = window.innerHeight;  var canvas = document.getElementById('c'); canvas.width = w, canvas.height = h;  var c = canvas.getContext("2d"), x = 100, y = 100, pointsObjectArray = [], frameCount = 1;  pointsNumber = 300, mouseCoordinate = [null, null], clickCheck = false;  window.document.body.onclick = function(argument) { mouseCoordinate = [argument.clientX, argument.clientY]; if (!clickCheck) { clickCheck = !clickCheck; } for (var i = 0; i < pointsNumber; i++) { pointsObjectArray[i] = new Point(); }; frameCount = 1; } 
 /* check the number of argument to make sure which dimension we want. (onely 1~3)*/
 var bezierLine = function(bezierPointArray, frame) { frame = frame / 400; minusT = 1 - frame; tempCoordinate = [0, 0]; switch (bezierPointArray.length) { case 2: tempCoordinate[0] = minusT * bezierPointArray[0][0] + frame * bezierPointArray[1][0]; tempCoordinate[1] = minusT * bezierPointArray[0][1] + frame * bezierPointArray[1][1]; return tempCoordinate; case 3: tempCoordinate[0] = Math.pow(minusT, 2) * bezierPointArray[0][0] + 2 * minusT * frame * bezierPointArray[1][0] + Math.pow(frame, 2) * bezierPointArray[2][0]; tempCoordinate[1] = Math.pow(minusT, 2) * bezierPointArray[0][1] + 2 * minusT * frame * bezierPointArray[1][1] + Math.pow(frame, 2) * bezierPointArray[2][1]; return tempCoordinate; case 4: tempCoordinate[0] = Math.pow(minusT, 3) * bezierPointArray[0][0] + 3 * bezierPointArray[1][0] * frame * Math.pow(minusT, 2) + 3 * bezierPointArray[2][0] * Math.pow(frame, 2) * minusT + bezierPointArray[3][0] * Math.pow(frame, 3); tempCoordinate[1] = Math.pow(minusT, 3) * bezierPointArray[0][1] + 3 * bezierPointArray[1][1] * frame * Math.pow(minusT, 2) + 3 * bezierPointArray[2][1] * Math.pow(frame, 2) * minusT + bezierPointArray[3][1] * Math.pow(frame, 3); return tempCoordinate; } } 
 var random = function() { tempI = arguments[0]; return Math.random() * tempI; } 

 /* start from startPoint, end at endPoint. During the animation, use previousPoint and nextPoint to caculate it.
  then use bezierPoint 1 and 2 to make the curve.  */
 var Point = function() { if (clickCheck) { this.startPoint = mouseCoordinate; this.endPoint = [mouseCoordinate[0]+1, mouseCoordinate[1]+1]; } else { this.startPoint = [null, null]; this.endPoint = [null, null]; } this.previousPoint = [null, null]; this.nextPoint = [null, null]; this.bezierPoint1 = [null, null]; this.bezierPoint2 = [null, null]; this.moveCount = 0; this.moveCountCheck = 0; this.color = null; this.lineWidth = random(15); this.cap = "round"; this.speed = 0.4; } 
 Point.prototype.update = function(frame, whichPoint) { if (frame < 2) { frame = frame * this.speed;  if (clickCheck) {  } else { this.startPoint = [w / 2, h / 2]; this.endPoint = [w / 2 + 1, h / 2 + 1]; } this.previousPoint = this.startPoint; this.bezierPoint1 = [random(w), random(h)]; this.bezierPoint2 = [random(w), random(h)];  } else { frame = frame * this.speed;  if (this.previousPoint[0] != this.endPoint[0] || this.previousPoint[1] != this.endPoint[1]) {  this.nextPoint = bezierLine([this.previousPoint, this.bezierPoint1, this.bezierPoint2, this.endPoint], frame); c.beginPath(); c.moveTo(this.previousPoint[0], this.previousPoint[1]); c.lineTo(this.nextPoint[0], this.nextPoint[1]); if (this.color) { c.strokeStyle = this.color; } else { c.strokeStyle = 'hsla(' + ((frame) * 5) % 360 + ', ' + "100%" + ', ' + random(100).toString() + "%" + ', 1)'; } c.lineWidth = this.lineWidth; c.lineCap = this.cap; c.stroke();  this.previousPoint = this.nextPoint;  } else { frameCount = 0; } } };  function init(pointsNum) { for (var i = 0; i < pointsNum; i++) { pointsObjectArray[i] = new Point(); }; } 
 function loop() {  c.fillStyle = 'rgba(20,20,20,1)'; c.fillRect(0, 0, w, h); for (var i = 0; i < pointsObjectArray.length; i++) { pointsObjectArray[i].update(frameCount, i); };  frameCount++; window.requestAnimationFrame(loop); } 
 init(pointsNumber);
 loop();


}
//]]>
</script>

Hiệu ứng pháo hoa 3

Bước 1:
Thực hiện như bước 1 của hiệu ứng 1
Bước 2:
Thực hiện như các bước 2 ở trên với javascript sau
<script type='text/javascript'>
//<![CDATA[
function randomInt(min,max){
 return Math.floor(Math.random()*(max-min+1)+min);
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var width = window.innerWidth;
var height = window.innerHeight;

canvas.width = width;
canvas.height = height;

var t = 0;

function clearCanvas(){
 ctx.fillStyle = "rgba(0,0,0,.1)";
 ctx.fillRect(0, 0, width, height);
}

clearCanvas();

function circle(x,y,radius){
 ctx.beginPath();
 ctx.arc(x,y,radius,0,2*Math.PI);
 ctx.closePath();
}

/* ----------------- */

var seedsAmount = 1;
var seeds = [];
var particles = [];
var auto = true;

for(var i = 0; i < seedsAmount; i++){
 var seed = new Seed(width/2, height - 40, 180, [randomInt(0,359), '100%', '50%']);
 seeds.push(seed);
}

/* ---------------- */

function loop(){

 clearCanvas();

 ctx.globalCompositeOperation = 'lighter';

 for(var i = 0; i < seeds.length; i++){
  if(!seeds[i].dead){
   seeds[i].move();
   seeds[i].draw();
  }else{
   seeds.splice(i, 1);
  }
 }

 for(var i = 0; i < particles.length; i++){
  if(!particles[i].dead){
   particles[i].move();
   particles[i].draw();
  }else{
   particles.splice(i, 1);
  }
 }

 if(auto && t%5==0){
  var seed = new Seed(randomInt(20, width-20), height-20, randomInt(175, 185), [randomInt(0,359), '100%', '50%']);
  seeds.push(seed);
 }

 ctx.globalCompositeOperation = 'source-over';
 
 requestAnimationFrame(loop);
 t++;
}

function Seed(x,y,angle,color){
 this.x = x;
 this.y = y;
 this.acceleration = 0.05;
 this.radius = 3;
 this.angle = angle;
 this.h = color[0]; this.s = color[1]; this.l = color[2];
 this.color = 'hsla('+this.h+','+this.s+','+this.l+', 1)';
 this.speed = 2;
 this.dead = false;

 this.move = function(){
  if(this.y > randomInt(100, 200)){
   this.speed += this.acceleration;

   this.x += this.speed * Math.sin(Math.PI / 180 * this.angle);
   this.y += this.speed * Math.cos(Math.PI / 180 * this.angle);
  }else{
   if(!this.dead){
    this.explode();
    this.dead = true;
    notClear = true;
   }
  }
 }

 this.draw = function(){
  ctx.fillStyle = this.color;
  circle(this.x, this.y, this.radius);
  ctx.fill();
 }

 this.explode = function(){
  for(var i = 0; i < 359; i+=4){
   var particle = new Firework(this.x, this.y, i+randomInt(-200,200)/100, [this.h, this.s, this.l]);
   particles.push(particle);
  }
 }


}

function Firework(x,y,angle,color){
 this.x = x;
 this.y = y;
 this.angle = angle;
 this.angleOffset = randomInt(-20,20)/100;
 this.color = color;
 this.opacity = 1;
 this.finalColor = 'hsla('+this.color[0]+','+this.color[1]+','+this.color[2]+','+this.opacity+')';
 this.gravity = 0.01;
 this.verticalSpeed = 0;
 this.speed = randomInt(195,205)/100;
 this.radius = 1;
 this.acceleration = -0.01;

 this.move = function(){
  if(this.opacity>0){
   if(this.speed>0){
    this.speed += this.acceleration;
   }

   this.angle+=this.angleOffset;

   this.opacity-=0.005;
   this.finalColor = 'hsla('+this.color[0]+','+this.color[1]+','+this.color[2]+','+this.opacity+')';

   this.verticalSpeed += this.gravity;

   this.x += this.speed * Math.sin(Math.PI / 180 * this.angle);
   this.y += this.speed * Math.cos(Math.PI / 180 * this.angle) + this.verticalSpeed;
  }else{
   if(!this.dead){
    this.dead = true;
   }
  }
 }

 this.draw = function(){
  ctx.fillStyle = this.finalColor;
  circle(this.x, this.y, this.radius);
  ctx.fill();
 }
}

loop();


window.addEventListener('click', function(e){
 var seed = new Seed(e.pageX, e.pageY, randomInt(175, 185), [randomInt(0,359), '100%', '50%']);
 seeds.push(seed);
});

window.addEventListener('resize', function(){
 width = window.innerWidth;
 height = window.innerHeight;

 canvas.width = width;
 canvas.height = height;

 clearCanvas();
});
//]]>
</script>

Hiệu ứng pháo hoa 4

Bước 1:Như bước 1 của hiệu ứng 1
Bước 2:Như các bước 2 ở trên với javascript:
<script type='text/javascript'>
//<![CDATA[
var ctx = canvas.getContext("2d");
var w = document.body.clientWidth;
var h = document.body.clientHeight;
canvas.width = w;
canvas.height = h;

var nodes = [];


function draw() {
  requestAnimationFrame(draw);
  
  ctx.globalCompositeOperation = "destination-out";
  ctx.fillStyle = "rgba(0, 0, 0, .08)";
  ctx.fillRect(0, 0, w, h);
  
  ctx.globalCompositeOperation = "lighter";
  
  var l = nodes.length, node;
  while(l--) {
    node = nodes[l];
    drawNode(node);
    if (node.dead) {
      nodes.splice(l, 1);
    }
  }
  
  if (nodes.length < 10) {
    l = rand(4, 1) | 0;
    while(l--) {
      nodes.push(makeNode(
        Math.random() * w | 0,
        Math.random() * h | 0,
        40,
        "hsl(" + (rand(300, 0) | 0) + ", 100%, 50%)",
        100
      ));
    }
  }
}

function drawNode(node) {
  var l = node.children.length
    , point
    ;
  while(l--) {
    point = node.children[l];
    ctx.beginPath();
    ctx.fillStyle = point.color;
    ctx.arc(point.x, point.y, 1, 0, PI2);
    ctx.fill();
    ctx.closePath();
    updatePoint(point);
    if (point.dead) {
      node.children.splice(l, 1);
      if (node.count > 20) {
        nodes.push(makeNode(
            point.x, 
            point.y,
            node.radius * 10,
            node.color,
            (node.count / 10) | 0
        ))
      }
    }
  }
  if (!node.children.length) {
    node.dead = true;
  }
}

function updatePoint(point) {
  var dx = point.x - point.dx;
  var dy = point.y - point.dy;
  var c = Math.sqrt(dx * dx + dy * dy);
  point.dead = c < 1;
  point.x -= dx * point.velocity;
  point.y -= dy * point.velocity;
}

const rad = Math.PI / 180;
const PI2 = Math.PI * 2;
var ttt = 0;

function rand(max, min) {
  min = min || 0;
  return Math.random() * (max - min) + min;
}

function makeNode(x, y, radius, color, partCount) {
  
  radius = radius || 0;
  partCount = partCount || 0;
  var count = partCount;
  
  var children = []
    , kof
    , r 
    ;
  
  
  while(partCount--) {
    kof = 100 * Math.random() | 0;
    r = radius * Math.random() | 0;
    children.push({
      x: x,
      y: y,      
      dx: x + r * Math.cos(ttt * kof * rad),
      dy: y + r * Math.sin(ttt * kof * rad),
      color: color,
      velocity: rand(1, 0.05)
    });
    ttt++
  }
  
  return {
   radius: radius,
    count: count,
    color: color,
    x: x,
    y: y,
    children: children
  }
}

draw();
//]]>
</script>

Hiệu ứng pháo hoa 5

Bước 1:Như bước hiệu ứng 1.
Bước 2: Như các bước 2 ở trên với javascript sau:
<script type='text/javascript'>
//<![CDATA[
let canvas = document.getElementById('canvas')
canvas.height = window.innerHeight
canvas.width = window.innerWidth
let ctx = canvas.getContext('2d')

let g = 0.09
let startX = canvas.width / 2
let startY = canvas.height / 2
let lifeMax = 50

function Sand(x, y) {
  this.x = x
  this.y = y
  this.vx = Math.random() * 5 - 2.5
  this.vy = Math.random() * 5 - 2.5
  this.ay = g
  this.size = 2
  this.life = lifeMax
}

Sand.prototype.draw = function() {
  ctx.fillStyle = `hsla(${Math.floor(this.life / lifeMax * 60)}, 100%, ${Math.floor(this.life / lifeMax * 70) + 30}%, 0.8)`
  ctx.fillRect(this.x, this.y, this.size, this.size)
}

Sand.prototype.step = function() {
  this.x += this.vx
  this.y += this.vy
  this.vy += this.ay
  this.life--
}

let clearWorld = function() {
  ctx.fillStyle = 'rgba(0,0,0,0.2)'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
}

let count = 1000
let sands = []
for (let i = 0; i < count; i++) {
  setTimeout(function() {
    sands.push(new Sand(canvas.width / 2, canvas.height / 2))
  }, Math.random() * 3000)
}

function loop() {
  requestAnimationFrame(loop)
  clearWorld()
  for (let sand of sands) {
    sand.step()
    if (sand.life <= 0) {
      sands.shift()
      sands.push(new Sand(startX, startY))
    }
    sand.draw()
  }
}

requestAnimationFrame(loop)

function redraw(event) {
  direction = Math.random() * Math.PI * 2
  startX = event.clientX
  startY = event.clientY
}

window.addEventListener('mousedown', redraw)

window.addEventListener('resize', resizeCanvas)

function  resizeCanvas() {
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
}

let direction = Math.random() * 2 * Math.PI

function moveOrigin() {
  requestAnimationFrame(moveOrigin)
  startX += Math.cos(direction) * 10
  startY += Math.sin(direction) * 10
  if (startY > canvas.height || startY < 0) {
    direction = -direction
  } else if (startX > canvas.width || startX < 0) {
    direction = Math.PI - direction
  }
  direction += (Math.random() * 0.4 - 0.2)
}

requestAnimationFrame(moveOrigin)
//]]>
</script>
Chúc các bác tết nhất vui vẻ nhớ!




Nhận xét

2 nhận xét :