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 đã.
Hiệu ứng pháo hoa 1

Xem trên codepen
DEMO
Xem trực tiếp trên blogspot

DEMO

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

Xem trên codepen
DEMO
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

Xem trên codepen
DEMO
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

Xem trên codepen
DEMO
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

Xem trên codepen
DEMO
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>

Xem thêm một số cách trang trí khác cho Blogspot

- Code dây đèn nhấp nháy và hiệu ứng pháo hoa cho blog nền đen

- Tổng hợp hiệu ứng pháo hoa cho blogspot

- Tạo pháo hoa năm mới

- Trang trí tết Kỷ Hợi 2019

- Tuyết rơi và chữ Merry chrismas

- Ông già Nô En cưỡi tuần lộc

- Tạo đồng hồ đếm ngược với javascript

- Code tạo chuông Giáng Sinh

- Trang trí tết cho blogspot
Chúc các bác tết nhất vui vẻ nhớ!
Publis: 

2 comments

  1. hay vãi
    1. :))
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji