HTML煙花效果是一種非常有趣和迷人的效果,它可以讓網頁變得更加生動有趣。下面是一份HTML煙花效果的源代碼示例。
<canvas id="fireworks"></canvas> <script> var canvas = document.getElementById("fireworks"); var ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var p = []; var num = 100; var W = canvas.width; var H = canvas.height; for (var i = 0; i < num; i++) { p.push({ x: Math.random() * W, y: Math.random() * H, r: Math.random() * 4 + 1, d: Math.random() * num, color: "rgba(" + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", 0.8)" }); } function draw() { ctx.clearRect(0, 0, W, H); for (var i = 0; i < num; i++) { var s = p[i]; ctx.beginPath(); ctx.fillStyle = s.color; ctx.moveTo(s.x, s.y); ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2, true); ctx.fill(); } update(); } function update() { for (var i = 0; i < num; i++) { var s = p[i]; s.y += Math.cos(s.d) + 1 + s.r / 2; s.x += Math.sin(s.d) * 2; if (s.x > W || s.x < 0 || s.y > H) { p[i] = { x: Math.random() * W, y: -10, r: s.r, d: s.d, color: s.color }; } } } setInterval(draw, 30); </script>
以上代碼包括一個Canvas標簽和一些Javascript代碼。Canvas標簽用于繪制圖像,而Javascript代碼定義了煙花的特征和移動方式。Javascript代碼中定義了一個包含隨機數、坐標、大小、顏色等屬性的數組,然后根據隨機數不斷更新坐標來實現煙花的移動。
這份源代碼可以讓你在網頁上展示一個炫酷的煙花效果,非常適合用于慶祝節日等特殊的場合。如果你需要在網頁中添加更多的特效效果,可以借鑒以上代碼的思路,自行編寫更加復雜的特效效果。
上一篇html的代碼怎么測試
下一篇css 中如何傳變量