适合新手的HTML网页下落樱花背景效果代码

时间：2026-08-10 18:14:49 编辑：袖梨来源：一聚教程网

Canvas实现下落樱花背景更可控轻量，因CSS需为每个花瓣创建独立元素和动画规则导致性能差，而Canvas用循环绘制数百花瓣，支持风力、碰撞、透明度渐变等自然动效。

直接用 canvas 实现下落樱花背景，比 CSS 动画更可控、更轻量，新手照着抄就能跑起来，不用装库、不依赖框架。

为什么不用 CSS @keyframes 做樱花飘落

CSS 动画对每个花瓣都得单独建元素 + 动画规则，100 个花瓣就要 100 个 <div> 和对应样式，内存涨、重绘卡、控制位置/旋转/加速度几乎没法做。而 canvas 用一个循环画几百个点，CPU 占用低，还能加风力、碰撞、透明度渐变。

canvas 绘制樱花的核心逻辑

本质是每帧清空画布 → 更新每个花瓣的 y（下落）、x（左右飘）、alpha（透明度）→ 用 ctx.beginPath() + arc() 或小图片画花瓣。关键不是“画得多像”，而是“动得自然”：

y 每次加 speed * dt（dt 是帧间隔，避免不同设备掉帧导致速度不一）
x 加一个微小正弦偏移：Math.sin(y * 0.01) * 2，模拟风的影响
花瓣到底部后，重置到顶部并随机 x、新 speed（0.5–2.5）、新大小（2–6px）
用 ctx.fillStyle = `rgba(255, 220, 220, ${alpha})` 控制淡入淡出

可直接粘贴运行的最小可行代码

把下面这段保存为 index.html，双击打开就行。只用了原生 JS + canvas，无外部依赖：

<!DOCTYPE html><html><head><meta charset="utf-8"><style>body { margin: 0; overflow: hidden; background: #f8f4f0; }canvas { display: block; }</style></head><body><canvas id="sakura"></canvas><script>const canvas = document.getElementById('sakura');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const petals = []; const petalCount = 120;
for (let i = 0; i < petalCount; i++) { petals.push({ x: Math.random()  canvas.width, y: Math.random()  -canvas.height, size: Math.random()  4 + 2, speed: Math.random()  2 + 0.5, sway: Math.random()  0.02, swayOffset: Math.random()  Math.PI * 2, alpha: Math.random() }); }
function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
function animate(timestamp) { if (!lastTime) lastTime = timestamp; const dt = Math.min(50, timestamp - lastTime) / 16; // 归一化帧差 lastTime = timestamp;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const p of petals) { p.y += p.speed  dt; p.x += Math.sin(p.y  p.sway + p.swayOffset)  0.5  dt;
if (p.y &gt; canvas.height + 10) {p.y = -10;p.x = Math.random() * canvas.width;p.size = Math.random() * 4 + 2;p.speed = Math.random() * 2 + 0.5;p.sway = Math.random() * 0.02;p.swayOffset = Math.random() * Math.PI * 2;p.alpha = Math.random() * 0.5 + 0.2;}ctx.globalAlpha = p.alpha;ctx.beginPath();ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);ctx.fillStyle = '#ffdddd';ctx.fill();
} ctx.globalAlpha = 1;
requestAnimationFrame(animate); }
let lastTime; window.addEventListener('resize', resize); requestAnimationFrame(animate); </script> </body> </html>

改起来也简单：想更密就调大 petalCount；想更慢就把所有 speed 乘 0.7；换颜色改 ctx.fillStyle；要加旋转就补一句 ctx.rotate(Math.PI / 4)（注意先 save() 后 restore()）。真正容易被忽略的是 dt 归一化——没它，高刷屏上樱花会快得飞出去，低配机又卡成幻灯片。

推荐专题

最新下载

热门教程

适合新手的HTML网页下落樱花背景效果代码

为什么不用 CSS @keyframes 做樱花飘落

canvas 绘制樱花的核心逻辑

可直接粘贴运行的最小可行代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程