Video học lập trình mỗi ngày

Firework effect website - Tết nhất đến rồi, các thành phố lớn như Hà Nội hay TP Hồ Chí Minh đều bắn pháo hoa chào mừng tết cổ truyền. Với một lập trình viên thì tạo ra những sự kiện này thì không quá khó. Thử viết một sự kiện với javascript để bắn pháo hoa trên bất kỳ website nào mong muốn. 

Tìm kiếm thử "fireworks" trong codepen , bạn có thể tìm thấy tất cả các loại hiệu ứng pháo hoa được thực hiện bằng JS. Đoạn mã tôi chia sẻ ngày hôm nay cũng là một tham chiếu từ một trong số những developer trên này.

Fireworks javascript code

Để bắn pháo hoa trên bất kỳ trang web nào sử dụng js. Trước tiên chúng ta "add Page" trong bookmark. Ở đây tôi dùng chrome version mới nhất. 

Với đoạn code sau

javascript:!(function() {var cdom = document.createElement("canvas");cdom.id = "myCanvas";cdom.style.position="fixed";cdom.style.left = "0";cdom.style.top = "0";cdom.style.zIndex=-1;document.body.appendChild(cdom);var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}window.addEventListener('resize', resizeCanvas, false);resizeCanvas();clearCanvas();function clearCanvas(){context.fillStyle = '#000000';context.fillRect(0,0,canvas.width, canvas.height);}function mouseDownHandler(e) {var x = e.clientX;var y = e.clientY;fire(x,y);}var rid;function fire(x,y){createFireworks(x,y);function tick() {context.globalCompositeOperation = 'destination-out';    context.fillStyle = 'rgba(0,0,0,'+10/100+')';    context.fillRect(0,0,canvas.width,canvas.height);    context.globalCompositeOperation = 'lighter';drawFireworks();rid=requestAnimationFrame(tick);}cancelAnimationFrame(rid);tick();}var particles=[];function createFireworks(sx,sy){particles=[];var hue = Math.floor(Math.random()*51)+150;var hueVariance = 30;var count = 100;for(var i = 0 ;i

Sau đó chúng ta có thể làm gì mà mình thích trên mọi website nào chúng ta muốn rực rỡ.