HTML5是當今網頁開發中不可或缺的技術之一。在HTML5中，我們可以輕松地實現一些神奇的效果，比如花瓣飄落的效果。

具體實現方式如下：

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
// 獲取canvas元素
var canvas = document.getElementById("myCanvas");
// 設置canvas的寬高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 獲取繪畫上下文
var ctx = canvas.getContext("2d");
// 定義花瓣對象
function Flower() {
this.x = Math.random() * canvas.width;
this.y = -100;
this.vx = Math.random() - 0.5;
this.vy = Math.random() * 5 + 2;
this.radius = Math.random() * 5 + 5;
this.color = "rgba(" + parseInt(Math.random() * 255) + ", " + parseInt(Math.random() * 255) + ", " + parseInt(Math.random() * 255) + ", 0.5)";
}
// 繪畫花瓣
Flower.prototype.drawFlower = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
}
// 更新花瓣位置
Flower.prototype.updateFlower = function() {
this.x += this.vx;
this.y += this.vy;
}
// 存儲花瓣對象的數組
var flowers = [];
// 添加花瓣
function addFlower() {
var flower = new Flower();
flowers.push(flower);
}
// 定時添加花瓣
setInterval(addFlower, 100);
// 刷新畫布
function refresh() {
// 清除畫布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 繪畫花瓣
for (var i = 0; i< flowers.length; i++) {
flowers[i].drawFlower();
flowers[i].updateFlower();
// 當花瓣超出畫布范圍時，從數組中刪除
if (flowers[i].x< -10 || flowers[i].x >canvas.width + 10 || flowers[i].y >canvas.height + 10) {
flowers.splice(i, 1);
i--;
}
}
// 繼續刷新畫布
requestAnimationFrame(refresh);
}
// 開始刷新畫布
refresh();
</script>

通過上述代碼，我們可以實現花瓣飄落的效果，并且在不同的瀏覽器中都能夠正確地顯示。