HTML5 utilise Canvas pour obtenir l'effet de flamme qui suit les compétences du didacticiel curseur_html5

Le code complet de cet effet est le suivant. Enregistrez le code dans un fichier HTML et ouvrez-le pour voir l'effet :

. Copier le code Le code est le suivant : HTML5 Effet de flamme sur toile body{margin : 0 ; padding : 0 ; antecedents keleyi-com"> window.onload = function(){ var keleyi_canvas = document.getElementById("canvas- kel" "eyi-com"); var ctx = keleyi_canvas.getContext("2d"); var W = window.innerWidth, H = window.innerHeight; keleyi_canvas.width = W; keleyi_canvas.height = H;&lt ;/p> var particules = []; var souris = {};

//Créons des particules maintenant var Particule_count = 100; for(var i = 0; i { particles.push(nouvelle particule( )); } keleyi_canvas.addEventListener('mousemove', track_mouse, false);

function track_mouse(e) { mouse.x = e.pageX; mouse.y = e.pageY; }

function draw() { ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "black"; ctx.fillRect(0, 0, W, H ); ctx.globalCompositeOperation = "plus léger";

for(var i = 0; i { var p = particules[i]; ctx.beginPath(); p.opacity = Math.round(p.remaining_life/p.life*100)/100 var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location .y, p.radius); gradient.addColorStop(0, "rgba(" p.r ", " p.g ", " p.b ", " p.opacity ")"); gradient.addColorStop(0.5, "rgba(" p.r ", " p.g ", " p.b ", " p.opacity ")"); gradient.addColorStop(1, "rgba(" p.r ", " p.g ", " p.b ", 0) "); ctx.fillStyle = gradient; ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false); ctx.fill ();

p.remaining_life--; p.radius--; p.location.x = p.speed.x; p.location.y = p.speed. y;&Lt;/p> if(p.remaining_life { particles[i] = new particule(); } } }

setInterval(draw, 86); }