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

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); }

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