このエフェクトの完全なコードは次のとおりです。コードを HTML ファイルに保存し、それを開いてエフェクトを表示します。 コードをコピーコードは次のとおりです: HTML5 キャンバスの炎の効果<br>body{マージン: 0; パディング: 0; }<br>#canvas-keleyi- com {display: block;}<br><br>window.onload = function(){<br>var keleyi_canvas = document.getElementById("canvas- kel" "eyi-com"); <br>var ctx = keleyi_canvas.getContext("2d");<br>var W = window.innerWidth, H = window.innerHeight;<br>keleyi_canvas.width = W;<br>keleyi_canvas.height = H;< ;/p> <p>var 粒子 = [];<br />var マウス = {};</p> <p>//ここでパーティクルを作成してみましょう<br>vararticle_count = 100;<br>for(var i = 0; i <particle_count i></particle_count>{<br>particles.push(newarticle( ));<br>}<br>keleyi_canvas.addEventListener('mousemove', track_mouse, false);</p> <p>function track_mouse(e)<br>{<br>mouse.x = e.pageX;<br>mouse.y = e.pageY;<br>}</p> <p>functionarticle()<br>{<br>this.speed = {x: -2.5 Math.random()*5, y: -15 Math.random()*10};<br>// location = マウス座標<br>//炎はマウス座標に従います<br>if(mouse.x && Mouse.y)<br>{<br>this.location = {x:mouse.x, y:mouse .y};<br>}<br>else<br>{<br>this.location = {x: W/2, y: H/2};<br>}<br>//半径範囲 = 10 -30<br>this.radius = 10 Math.random()*20;<br>//ライフ範囲 = 20-30<br>this.life = 20 Math.random()*10;<br>this。 Remaining_life = this.life;<br>//colors<br>this.r = Math.round(Math.random()*255);<br>this.g = Math.round(Math.random()*255 );<br>this.b = Math.round(Math.random()*255);<br>}</p> <p>functiondraw()<br>{<br>ctx.globalCompositeOperation = "source-over";<br>ctx.fillStyle = "black";<br>ctx.fillRect(0, 0, W, H );<br>ctx.globalCompositeOperation = "軽量";</p> <p>for(var i = 0; i <particles.length i></particles.length>{<br>var p =加速度[i];<br>ctx.beginPath();<br>p.opacity = Math.round(p.remaining_life/p.life*100)/100<br>var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location .y, p.radius);<br>gradient.addColorStop(0, "rgba(" p.r ", " p.g ", " p.b ", " p.opacity ")");<br>gradient.addColorStop(0.5, "rgba(" p.r ", " p.g ", " p.b ", " p.opacity ")");<br>gradient.addColorStop(1, "rgba(" p.r ", " p.g ", " p.b ", 0) ");<br>ctx.fillStyle = gradient;<br>ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);<br>ctx.fill ();</p> <p><br>p.remaining_life--;<br>p.radius--;<br>p.location.x = p.speed.x;<br>p.location.y = p.speed。 y; <p>if(p.remaining_life < 0 || p.radius < 0)<br>{<br>粒子[i] = 新しい粒子();<br>}<br>}<br>} </p> <p>setInterval(draw, 86);<br>}<br>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
