HTML5流星雨是一種特別炫酷的效果，它可以為網頁增加一些令人印象深刻的動感元素。

<canvas></canvas>
<script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var meteorArr = []; // 用來存放流星數組
function Meteor() {
this.x = Math.random() * w; // 隨機生成流星的位置
this.y = Math.random() * h;
this.length = Math.random() * 80 + 10; // 隨機生成流星的長度
this.speed = Math.random() * 3 + 3; // 隨機生成流星的速度
this.angle = Math.PI / Math.random() * 2; // 隨機生成流星的角度
}
Meteor.prototype.draw = function() {
var endX = this.x - Math.cos(this.angle) * this.length;
var endY = this.y - Math.sin(this.angle) * this.length;
var gradient = ctx.createLinearGradient(this.x, this.y, endX, endY);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.5)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(endX, endY);
ctx.strokeStyle = gradient;
ctx.stroke();
}
function loop() {
ctx.clearRect(0, 0, w, h);
meteorArr.push(new Meteor());
for (var i = 0; i< meteorArr.length; i++) {
meteorArr[i].draw();
meteorArr[i].x -= meteorArr[i].speed * Math.cos(meteorArr[i].angle);
meteorArr[i].y -= meteorArr[i].speed * Math.sin(meteorArr[i].angle);
if (meteorArr[i].x< -200 || meteorArr[i].x >w + 200 || meteorArr[i].y< -200 || meteorArr[i].y >h + 200) {
meteorArr.splice(i, 1);
i--;
}
}
requestAnimationFrame(loop);
}
loop();
</script>

這是一個使用HTML5 Canvas繪制流星雨的代碼，其中的重要部分是Meteor這個構造函數。它是用來生成每一個流星的實例的，每一個流星實例都有一個隨機生成的位置、長度、速度和角度。

在loop函數中，我們會不斷地生成新的流星，并用Meteor.prototype.draw方法將它們繪制出來。同時，每一個流星實例都要更新自己的位置，如果它已經飛出了屏幕，則將它從流星數組meteorArr中刪除。最后，我們用requestAnimationFrame方法循環執行loop函數，這樣就可以讓流星雨不斷地落下了。