HTML5為我們帶來了很多新的特性，其中流星效果是一種很炫酷的效果，可以用來制作背景或者動態特效。如果你想使用這個效果，下面是一份HTML5中流星效果代碼免費提供給大家參考的。 首先，我們需要在HTML文檔中添加canvas標簽，用來顯示流星效果。代碼如下： `````` 接著，在JavaScript腳本中添加以下代碼，來實現流星效果： ``` var ctx = document.getElementById("starfall").getContext("2d"); // 創建一個流星對象 function Star() { this.alpha = 1; // 不透明度 this.color = "#fff"; // 顏色 this.velocity = { x: -1 + Math.random() * 2, y: 2 + Math.random() * 2 }; // 速度 this.position = { x: Math.random() * ctx.canvas.width, y: -20 }; // 位置 this.radius = Math.random() * 2; // 半徑 this.draw = function() { ctx.beginPath(); ctx.arc( this.position.x, this.position.y, this.radius, 0, Math.PI * 2, false ); ctx.fillStyle = this.color; ctx.globalAlpha = this.alpha; ctx.fill(); }; } // 創建多個流星對象 var stars = []; for (var i = 0; i< 50; i++) { stars.push(new Star()); } // 繪制流星對象 function draw() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); for (var i = 0; i< stars.length; i++) { var star = stars[i]; star.position.x += star.velocity.x; star.position.y += star.velocity.y; star.alpha -= 0.01; star.draw(); } // 刪除透明度小于零或者流星已經跑到畫布外的流星對象 stars = stars.filter(function(star) { return star.alpha >0 && star.position.y< ctx.canvas.height; }); // 添加新的流星對象 if (Math.random() >0.95) { stars.push(new Star()); } } // 定時繪制流星動畫 setInterval(draw, 30); ``` 以上代碼可以自動在畫布上繪制多個流星，每幾秒鐘會添加一個新的流星對象。你可以根據需要修改代碼中的參數，來改變流星效果的速度、數量等屬性。 希望這份HTML5中流星效果代碼對大家有用。記得在頁面上引入相應的CSS文件和JS文件，以獲取最佳效果。