Đây là code tạo pháo hoa cho nền body,với hiệu ứng này pháo hoa không ào ạt mà chỉ có tính chất điểm tô cho nền blogspot mà cụ thể chỉ thấy ở các khe trống giữa main và sidebar và toàn bộ body khi xem trên laptop.
Khi rê chuột vào vùng hiệu ứng có hiệu lực, chỏ chuột có hình dấu cộng và pháo hoa sẽ xuất hiện nếu nhấp chuột.
Dán đoạn css này vào trước thẻ
canvas{ cursor:crosshair; position:fixed; width:100%; height:100%; background:none; display:block
Dán đoạn html này vào sau thẻ
Dán đoạn javascript sau vào trước thẻ
//<![CDATA[ window.requestAnimFrame = ( function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ) { window.setTimeout( callback, 1000 / 60 ); }; })(); var canvas = document.getElementById( 'canvas' ), ctx = canvas.getContext( '2d' ), cw = window.innerWidth, ch = window.innerHeight, fireworks = [], particles = [], hue = 120, limiterTotal = 5, limiterTick = 0, timerTotal = 30, timerTick = 0, mousedown = false, mx, my; canvas.width = cw; canvas.height = ch; function random( min, max ) { return Math.random() * ( max – min ) + min; } function calculateDistance( p1x, p1y, p2x, p2y ) { var xDistance = p1x – p2x, yDistance = p1y – p2y; return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) ); } 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; } Firework.prototype.update = function( index ) { this.coordinates.pop(); this.coordinates.unshift( [ this.x, this.y ] ); if( this.targetRadius = this.distanceToTarget ) { createParticles( this.tx, this.ty ); fireworks.splice( index, 1 ); } else { this.x += vx; this.y += vy; } } Firework.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 = ‘hsl(‘ + hue + ‘, 100%, ‘ + this.brightness + ‘%)’; ctx.stroke(); ctx.beginPath(); ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 ); ctx.stroke(); } 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 – 50, hue + 50 ); this.brightness = random( 50, 80 ); this.alpha = 1; this.decay = random( 0.015, 0.03 ); } Particle.prototype.update = function( index ) { this.coordinates.pop(); this.coordinates.unshift( [ this.x, this.y ] ); this.speed *= this.friction; this.x += Math.cos( this.angle ) * this.speed; this.y += Math.sin( this.angle ) * this.speed + this.gravity; this.alpha -= this.decay; if( this.alpha = timerTotal ) { if( !mousedown ) { fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) ); timerTick = 0; } } else { timerTick++; } if( limiterTick >= limiterTotal ) { if( mousedown ) { fireworks.push( new Firework( cw / 2, ch, mx, my ) ); limiterTick = 0; } } else { limiterTick++; } } canvas.addEventListener( ‘mousemove’, function( e ) { mx = e.pageX – canvas.offsetLeft; my = e.pageY – canvas.offsetTop; }); canvas.addEventListener( ‘mousedown’, function( e ) { e.preventDefault(); mousedown = true; }); canvas.addEventListener( ‘mouseup’, function( e ) { e.preventDefault(); mousedown = false; }); window.onload = loop; //]]>
MaSi Blog 