相关系数与假设检验：从数据关联到统计推断的完整指南
2026/8/28 3:33:39
简介：Canvas作为HTML5的核心绘图接口，凭借其像素级控制与卓越的批量渲染能力，成为实现复杂动态特效的首选方案。在构建自然场景时，递归分形算法能够通过简单的规则生成结构复杂的枝干系统，模拟出树木的生长规律。而粒子系统则负责管理大量运动元素，如飘落的花瓣，赋予画面生命力。实践过程中，开发者常需权衡设备像素比、粒子数量与帧率之间的关系，同时关注不同浏览器如Chrome、Firefox、Safari在Canvas API和性能表现上的差异。本文以一棵会从生长到落英缤纷的樱花树为例，详细讲解Canvas环境搭建、递归绘制树枝、离屏预渲染花朵精灵以及动画循环优化等核心技术，并分享兼容性排查与性能调优的实用经验，帮助开发者快速掌握动态自然景观的创作技巧。 最近接了个小活，要在个人网站的首页加一个春天气息的动态背景，甲方点名要“樱花树”效果，而且必须是HTML5 Canvas实现。我最初以为又是那种烂大街的随机飘落花瓣，结果真正动手才发现，一棵会“生长”出来、带树干纹理、花朵会从树枝上飘落的樱花树，涉及的分形递归、粒子系统、Canvas状态栈管理，每一样都有不少门道。这篇博客就把我踩过的坑、权衡过的技术方案、最终跑通的完整代码全部摊开讲，尤其是不同浏览器对Canvas的兼容性差异，这篇文章会作为重点单独拿出来讲。
1. 为什么选Canvas而不是CSS或SVG：这件事一开始就得想清楚
拿到需求先别急着写代码，我试过三次才选对方案。第一次尝试是用纯CSS+多张花瓣图片做背景，效果在静止状态下还行，可一旦要表现“树上开花”“落英缤纷”这种动态过程，CSS动画就力不从心了——每个花瓣要独立控制路径、旋转、加速度，DOM节点动不动几百个，页面滚动立刻开始掉帧。第二次改用SVG，路径绘制和形状控制确实方便，但大量动态粒子的性能还是撑不住。最终回到Canvas 2D，这是唯一一个把“绘制自由度”和“批量粒子性能”平衡好的方案。
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| CSS动画 | 实现简单、浏览器兼容性好 | 粒子数量过多时性能差，轨迹控制弱 | 少量静态花瓣装饰 |
| SVG | 矢量清晰、DOM操作熟悉 | 每片花瓣都是DOM节点，批量渲染吃力 | 树形结构展示、图示 |
| Canvas 2D | 像素级控制、性能优秀、无DOM开销 | 需要手动管理渲染循环和状态 | 复杂动态特效、粒子系统、实时生成 |
| WebGL | 性能天花板最高 | 学习成本高，3D/复杂着色器才值得用 | 重度3D、大量粒子 |
如果你做的是一次性活动页，用户停留也就几秒，CSS凑合一下也行。但樱花树特效核心看点在于“树的生长过程”——从光秃秃的树干，到一层层分叉，再慢慢冒出花苞，这是一个长时间持续的画面，必须用Canvas把每一帧的绘制权握在手里。而且Canvas的getContext('2d')接口在主流浏览器里已经普及了十几年，Chrome、Edge、Firefox、Safari全线支持，只要不碰那些特别新的API，兼容性不用担心。
2. 搭建绘制环境：Canvas初始化与天空背景
2.1 HTML结构和基础样式
先建一个占满全屏的画布。注意不是把Canvas铺在body里就完事，要把margin清零，把overflow设成hidden，否则页面会出现滚动条，特效的沉浸感直接没了。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas樱花树特效</title> <style> * { margin: 0; padding: 0; overflow: hidden; } body { background: #1a1a2e; } canvas { display: block; width: 100vw; height: 100vh; } </style> </head> <body> <canvas id="sakuraCanvas"></canvas> <script> // 后续代码都写在这里 </script> </body> </html>这里有个小细节容易踩坑：很多入门教程会让CSS把Canvas设成width:100%;height:100%，但Canvas的width和height属性是画布的实际像素尺寸，CSS里的width/height只是显示尺寸。如果两者不一致，画面会模糊。最稳妥的做法是在JS里读取window.innerWidth和window.innerHeight，然后用这个真实尺寸设置Canvas的宽高。
2.2 初始化画布和天空渐变
const canvas = document.getElementById('sakuraCanvas'); const ctx = canvas.getContext('2d'); // 设置画布尺寸为窗口实际像素大小 function resizeCanvas() { const dpr = window.devicePixelRatio || 1; canvas.width = window.innerWidth * dpr; canvas.height = window.innerHeight * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } window.addEventListener('resize', resizeCanvas); resizeCanvas();先不急着画树，把背景画出来。背景决定整个画面的基调，我用了从深蓝到粉紫的渐变——这样既保留“夜晚宁静”的感觉，又和樱花的粉白形成对比，花朵会特别醒目。很多Demo用纯白或者浅蓝背景，樱花颜色重的情况下还行，但粉白色樱花在浅色背景里会糊成一片，所以我对背景做了深色处理。
function drawBackground() { const w = window.innerWidth; const h = window.innerHeight; // 径向渐变，模拟月光从左上洒下 const gradient = ctx.createRadialGradient( w * 0.3, h * 0.2, 50, w * 0.5, h * 0.5, Math.max(w, h) * 0.8 ); gradient.addColorStop(0, '#2b2d42'); gradient.addColorStop(0.5, '#4a3f5c'); gradient.addColorStop(1, '#1a1a2e'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, w, h); }再说一次：createRadialGradient的光圈中心位置和光圈半径，决定了整个氛围。我试过把中心放在正中央，效果像探照灯很突兀；放在左上角，模拟月光洒落的感觉自然得多。这个参数多试几次，比你调花多少时间都值。
2.3 不同浏览器对Canvas播放器的支持状况
这一节虽然标题带“播放器”，但说的是Canvas本身的兼容性。我实际在Chrome 122、Edge 122、Firefox 123、Safari 17.4上跑过这份代码，总结如下。
- Chrome/Edge：对Canvas 2D支持最完整，
ctx.roundRect()这类新API也能直接用，globalCompositeOperation所有模式全部生效，运行最流畅。 - Firefox：基础绘制API没有问题，但在大量路径绘制时，性能比Chrome低一些，需要适当降低粒子数上限。
- Safari：这里有个大坑，Safari对
devicePixelRatio大于2的设备，处理高分辨率画布时内存占用很容易暴涨，导致页面崩溃。建议在Safari上把DPR强制设为2，视觉差别不大但内存省下不少。 - 移动端浏览器：iOS Safari和安卓Chrome在低端机型上，
requestAnimationFrame的帧率不稳定，需要做降级处理，比如根据帧率自动减少粒子数量。
所以建议写一个兼容性检测函数，根据UA或者能力检测调整参数。下面这段代码虽然简单，但很实用：
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); const maxDpr = isSafari ? 2 : (window.devicePixelRatio || 1); const dpr = Math.min(window.devicePixelRatio || 1, maxDpr);3. 递归分形树枝：让树木自然生长
3.1 分形的核心逻辑
樱花树为什么越看越自然？因为它的枝干是分形的——每根枝条都像是整棵树的缩小版，从主干分出侧枝，侧枝再分出更细的枝，无限递归，直到细到肉眼看不出来为止。这个原理在计算机图形学里叫L-system或者递归分形。
用一句话概括实现思想：从树干底部一个点出发，以一定角度向上画线，在终点处随机分成2~3条更短的线，每条线重复这个分叉过程，直到线段短到一个阈值就停止。
3.2 递归绘制树干的完整实现
function drawTree(startX, startY, length, angle, depth, branchWidth) { if (depth === 0 || length < 4) return; const endX = startX + length * Math.cos(angle); const endY = startY - length * Math.sin(angle); // 画出当前枝干 ctx.beginPath(); ctx.moveTo(startX, startY); ctx.lineTo(endX, endY); ctx.strokeStyle = depth > 6 ? '#5a3d2b' : '#3d2b1f'; ctx.lineWidth = branchWidth; ctx.lineCap = 'round'; ctx.stroke(); // 计算下一层的分支数量和角度 const branchCount = Math.random() < 0.3 ? 3 : 2; for (let i = 0; i < branchCount; i++) { // 分支角度在 -40° 到 +40° 之间波动 const angleOffset = (Math.random() - 0.5) * (Math.PI / 4.5); const newAngle = angle + angleOffset; const newLength = length * (0.65 + Math.random() * 0.15); drawTree(endX, endY, newLength, newAngle, depth - 1, branchWidth * 0.65); } }这个函数里最重要的三个参数：length树枝长度、angle生长角度、depth递归深度。角度用弧度制，Math.cos和Math.sin配合算出终点坐标。注意画布坐标系里y轴向下是正方向，所以向上生长要用减号：endY = startY - length * Math.sin(angle)。
3.3 随机因子：让每棵树都长不一样
固定角度、固定长度的递归画出来的树是“对称树”，看起来像小孩子画的圣诞树，缺少野外的自然感。所以要给每个分支加随机扰动，让分支角度、长度、数量都有小幅变化。
我调随机数时还加了一个“懒惰因子”——如果当前枝干离地面高度太低，就让它优先向斜上方长，避免枝条垂到地上不自然。这个逻辑加了三行，但对视觉效果提升非常明显。
let angleOffset = (Math.random() - 0.5) * (Math.PI / 4.5); // 靠近树根时，偏转角度压缩，让主干尽量直立 if (depth > 8) { angleOffset *= 0.4; }还有一个经验：递归深度超过10层之后，视觉差异几乎看不出来，但计算量呈指数上升。我实测深度12的树，帧生成时间比深度10多了将近50毫秒，这直接卡成幻灯片。所以默认深度设为10，最大不要超过11，这是性能与观感的平衡点。
3.4 调节枝干粗细和颜色，增强立体感
同一棵树，如果所有枝干都是同一个lineWidth和颜色，会显得非常平。我每一级递归都在缩小线宽，而且颜色从深褐渐变到浅褐，这样就有了纵深感。更深一层，可以让靠近树梢的一两层分支不画线，直接画成花朵，这样花朵是长在细枝尽头的。
if (depth <= 2) { drawFlowerCluster(endX, endY, depth); }4. 花朵生成与飘落动画：让樱花“活”起来
4.1 花朵绘制：单朵花的结构
樱花的花瓣是五瓣，中间有花蕊。手动画每个花瓣需要计算五个角度，代码有点绕，我用的是“离屏Canvas预渲染”方案——先把一朵花画到一个独立的隐藏Canvas上，之后绘制时直接drawImage贴上去，这样比每帧重新计算五个花瓣的位置快得多。
function createFlowerSprite(size, color) { const off = document.createElement('canvas'); off.width = size * 2; off.height = size * 2; const octx = off.getContext('2d'); for (let i = 0; i < 5; i++) { const angle = (Math.PI * 2 * i) / 5 - Math.PI / 2; const px = size + size * 0.5 * Math.cos(angle); const py = size + size * 0.5 * Math.sin(angle); octx.beginPath(); octx.ellipse(px, py, size * 0.45, size * 0.3, angle, 0, Math.PI * 2); octx.fillStyle = color; octx.fill(); } // 中心花蕊 octx.beginPath(); octx.arc(size, size, size * 0.12, 0, Math.PI * 2); octx.fillStyle = '#ffd700'; octx.fill(); return off; }drawImage贴图比每帧重新描边节省的时间非常可观。同样的三百朵花，每帧用路径绘制需要6~8毫秒，预渲染后drawImage只需要1毫秒左右。这个技巧在粒子系统里是通用优化手段，不管你是做烟花、雪花还是飘落树叶，通通适用。
4.2 花瓣飘落粒子系统
花朵长在树上不是终点，飘落才是精髓。我维护一个粒子数组，每个粒子包含位置、速度、旋转角度、旋转速度、大小、透明度这些属性。
const petals = []; function spawnPetal(x, y) { petals.push({ x: x, y: y, vx: (Math.random() - 0.5) * 2, vy: Math.random() * 1.5 + 0.5, rotation: Math.random() * Math.PI, rotationSpeed: (Math.random() - 0.5) * 0.1, size: 6 + Math.random() * 8, opacity: 0.7 + Math.random() * 0.3 }); } function updatePetals() { for (let i = petals.length - 1; i >= 0; i--) { const p = petals[i]; p.x += p.vx; p.y += p.vy; p.rotation += p.rotationSpeed; // 加一点水平摆动 p.vx += Math.sin(Date.now() / 500 + p.y / 50) * 0.01; if (p.y > window.innerHeight + 30) { petals.splice(i, 1); } } } function drawPetals() { ctx.globalAlpha = 0.8; const sprite = flowerSprites[0]; for (const p of petals) { ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.rotation); ctx.drawImage(sprite, -p.size, -p.size, p.size * 2, p.size * 2); ctx.restore(); } ctx.globalAlpha = 1; }globalAlpha最好放在循环外统一设置，不要每片花瓣都改动，因为save/restore和globalAlpha的切换本身就消耗性能。
4.3 动画循环与自然生长
动画循环用requestAnimationFrame，浏览器会在每次刷新屏幕前调用回调，保证60fps。注意不要用setInterval，因为它的执行频率不受显示刷新率控制，会产生跳帧和撕裂感。
let growth = 0; const growthSpeed = 0.02; // 生长速度系数 function animate() { drawBackground(); if (growth < 1) { growth += growthSpeed; } // 树的生长通过截取递归深度实现 const currentDepth = Math.min(10, Math.ceil(growth * 10)); drawTree(startX, startY, treeHeight, Math.PI / 2, currentDepth, 14); // 根据生长进度生成飘落花瓣 if (Math.random() < growth * 0.3) { const angle = Math.random() * Math.PI * 2; const radius = Math.random() * 200; const cx = startX + Math.cos(angle) * radius; const cy = startY - 100 - Math.random() * 150; spawnPetal(cx, cy); } updatePetals(); drawPetals(); requestAnimationFrame(animate); } animate();这里有一个刻意设计的细节：树不是第一帧就完整画出来的，而是通过growth变量慢慢“长”出来的，从树根到树梢，一朵朵花随之出现。生长时间控制在5秒左右比较舒服，太快看不清过程，太慢用户会觉得卡。
5. 性能调优与浏览器兼容排查：实测能跑多流畅
5.1 设备像素比与画布清晰度
逻辑像素为window.innerWidth、物理像素为window.innerWidth * dpr。当设备像素比为2或3时，如果画布宽高还是逻辑像素值，在高分屏上画面会发虚。解法是让Canvas宽高乘以dpr，再用ctx.setTransform(dpr,0,0,dpr,0,0)把坐标系缩放回来。代码见2.2节。
但dpr不是越大越好，在Safari上高dpr下内存容易爆。我的经验是设置上限：const dpr = Math.min(window.devicePixelRatio || 1, 2)。
5.2 粒子数量与帧率的取舍
我做了个简单的压力测试：在MacBook Pro M1上，Canvas全屏时粒子数500以下都是60fps；到1000粒降到50fps左右；到2000粒直接30fps，肉眼可见卡顿。所以我把默认飘落花瓣数量控制在150~300，即满足画面又不影响性能。
移动端更要注意，最好根据屏幕宽度动态调整：
const isMobile = window.innerWidth < 768; const maxPetals = isMobile ? 100 : 300;5.3 内存泄漏与Canvas状态管理
粒子对象从数组里splice掉之后，如果它的精灵图（离屏Canvas）还在全局引用着，内存不会释放。所以离屏Canvas应该只创建一次，复用，而不是每生成一片花瓣就新建一个。
另一个高频坑是ctx.save()和ctx.restore()不配对。save会把当前状态推入栈中，如果save了忘restore，会把画布状态栈堆满，最终导致内存泄漏甚至崩溃。我的习惯是每次translate、rotate、globalAlpha改动后，立刻配对save和restore，结构上是：
ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.rotation); ctx.drawImage(sprite, ...); ctx.restore();5.4 不同浏览器实际跑分对比
我拿同一份代码在四款浏览器跑了个简单帧率测试，画布1280x720，粒子数200，打开DevTools的Performance面板观察FPS：
| 浏览器 | 平均帧率 | 备注 |
|---|---|---|
| Chrome 122 | 60fps | 全程稳定 |
| Edge 122 | 60fps | 与Chrome基本一致 |
| Firefox 123 | 55~60fps | 偶有掉帧，主要在天气粒子较多时 |
| Safari 17.4 | 60fps | 但内存占用是Chrome的1.5倍左右 |
Firefox掉帧的元凶是我用的shadowBlur属性，这个属性在Firefox上开销极大。如果你要在Firefox上跑得稳，少用阴影，改用半透明多个圆叠加模拟柔光效果，性能好很多。
6. 完整代码与调参经验
6.1 可一键运行的完整代码
把前面的片段整合成一份完整代码，直接保存成HTML文件就能跑：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas樱花树特效</title> <style> * { margin: 0; padding: 0; overflow: hidden; } body { background: #1a1a2e; } canvas { display: block; } </style> </head> <body> <canvas id="sakuraCanvas"></canvas> <script> const canvas = document.getElementById('sakuraCanvas'); const ctx = canvas.getContext('2d'); let width, height; let petals = []; let growth = 0; const growthSpeed = 0.015; function resizeCanvas() { const dpr = Math.min(window.devicePixelRatio || 1, 2); width = window.innerWidth; height = window.innerHeight; canvas.width = width * dpr; canvas.height = height * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } window.addEventListener('resize', resizeCanvas); resizeCanvas(); // 创建花瓣精灵 const flowerSprites = []; function createFlowerSprites() { const colors = ['#ffb7c5', '#ffc0cb', '#ffe4e1', '#fff0f5']; for (let i = 0; i < colors.length; i++) { const off = document.createElement('canvas'); off.width = 64; off.height = 64; const octx = off.getContext('2d'); for (let j = 0; j < 5; j++) { const angle = (Math.PI * 2 * j) / 5 - Math.PI / 2; const px = 32 + 14 * Math.cos(angle); const py = 32 + 14 * Math.sin(angle); octx.beginPath(); octx.ellipse(px, py, 10, 7, angle, 0, Math.PI * 2); octx.fillStyle = colors[i]; octx.fill(); } octx.beginPath(); octx.arc(32, 32, 4, 0, Math.PI * 2); octx.fillStyle = '#ffd700'; octx.fill(); flowerSprites.push(off); } } createFlowerSprites(); function drawBackground() { const gradient = ctx.createRadialGradient( width * 0.3, height * 0.2, 50, width * 0.5, height * 0.5, Math.max(width, height) * 0.8 ); gradient.addColorStop(0, '#2b2d42'); gradient.addColorStop(0.5, '#4a3f5c'); gradient.addColorStop(1, '#1a1a2e'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, width, height); } function drawTree(startX, startY, length, angle, depth, branchWidth) { if (depth === 0 || length < 4) return; const endX = startX + length * Math.cos(angle); const endY = startY - length * Math.sin(angle); ctx.beginPath(); ctx.moveTo(startX, startY); ctx.lineTo(endX, endY); ctx.strokeStyle = depth > 6 ? '#5a3d2b' : '#3d2b1f'; ctx.lineWidth = branchWidth; ctx.lineCap = 'round'; ctx.stroke(); if (depth <= 2) { // 在树枝末端画花 ctx.drawImage( flowerSprites[Math.floor(Math.random() * flowerSprites.length)], endX - 12, endY - 12, 24, 24 ); } const branchCount = Math.random() < 0.3 ? 3 : 2; for (let i = 0; i < branchCount; i++) { let angleOffset = (Math.random() - 0.5) * (Math.PI / 4.5); if (depth > 8) angleOffset *= 0.4; const newAngle = angle + angleOffset; const newLength = length * (0.65 + Math.random() * 0.15); drawTree(endX, endY, newLength, newAngle, depth - 1, branchWidth * 0.65); } } function spawnPetal(x, y) { if (petals.length >= 300) return; petals.push({ x, y, vx: (Math.random() - 0.5) * 2, vy: Math.random() * 1.5 + 0.5, rotation: Math.random() * Math.PI, rotationSpeed: (Math.random() - 0.5) * 0.1, size: 6 + Math.random() * 8, sprite: flowerSprites[Math.floor(Math.random() * flowerSprites.length)] }); } function updateAndDrawPetals() { ctx.save(); for (let i = petals.length - 1; i >= 0; i--) { const p = petals[i]; p.x += p.vx; p.y += p.vy; p.rotation += p.rotationSpeed; p.vx += Math.sin(Date.now() / 500 + p.y / 50) * 0.01; if (p.y > height + 30) { petals.splice(i, 1); continue; } ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.rotation); ctx.drawImage(p.sprite, -p.size, -p.size, p.size * 2, p.size * 2); ctx.restore(); } ctx.restore(); } const startX = () => width / 2; const startY = () => height + 20; const treeHeight = () => Math.min(width, height) * 0.5; function animate() { drawBackground(); if (growth < 1) { growth += growthSpeed; } const currentDepth = Math.min(10, Math.ceil(growth * 10)); drawTree(startX(), startY(), treeHeight(), Math.PI / 2, currentDepth, 14); // 按生长进度生成飘落花瓣 if (Math.random() < growth * 0.2) { const angle = Math.random() * Math.PI * 2; const radius = Math.random() * 150; const cx = startX() + Math.cos(angle) * radius; const cy = startY() - 50 - Math.random() * 200; spawnPetal(cx, cy); } updateAndDrawPetals(); requestAnimationFrame(animate); } animate(); </script> </body> </html>6.2 常用参数调整建议
growthSpeed：树生长速度，0.01~0.02。数值越大，树干越长越快。treeHeight()：树的整体高度，建议占屏幕高度的40%~60%。maxPetals：飘落花瓣上限，低端移动端建议100，桌面端300。branchCount概率：控制在0.2~0.4，太高树冠太密，低一点更飘逸。angleOffset范围：π/4.5 大约40度，25度~35度之间的发散最自然。
我个人的调参心得：先固定深度10，其他参数慢慢调。每次只改一个变量，截图对比，别一次性改五六个——不然出了效果，你也不知道是哪个参数的功劳。
6.3 常见问题排查清单
| 现象 | 可能原因 | 解决方案 |
|---|---|---|
| 树只有上半截，不生长 | growth没递增，或递归深度卡在0 | 检查animate里growth += growthSpeed是否执行 |
| 树歪向一边 | 分支角度随机性太强 | 缩小angleOffset范围；对靠近树根的分支压缩偏移 |
| 画面特别模糊 | canvas宽高没乘devicePixelRatio | 用resizeCanvas中dpr处理 |
| Safari运行一会儿白屏 | 内存占用超标 | 把dpr上限设为2，减少最大粒子数 |
| Firefox卡顿 | shadowBlur或其他高开销属性 | 去掉阴影，用半透明叠加模拟 |
| 花瓣不飘落 | spawnPetal没执行或petals数组没更新 | 检查requestAnimationFrame是否有被阻断；检查spawnPetal条件是否一直不满足 |
6.4 再往深了做：还能扩展哪些玩法
这个基础版跑通之后，我建议往三个方向扩展：
- 鼠标交互：监听
mousemove，鼠标移动到树枝附近时让花朵加速飘落，或者点击某个位置生出一阵风。实现方式是在updatePetals里加一个风场力，方向随着鼠标位置变化。 - 时间变化：根据一天中的不同时段切换背景色和光照方向，早晨偏暖粉，夜晚用深蓝。这个只需要改
drawBackground里的渐变色标和位置。 - 多棵树：在同一画面里画三五棵不同的树，每棵树的生长时间不同、树高不同、花朵密度不同。这样画面的层次感会丰富很多，适合做整站背景的时候用。
我试过第三种扩展，把整屏铺满三棵错落的树，视觉冲击力确实比单棵树强得多，但性能开销也会上去，尤其是每棵树都要单独递归绘制。建议用“静态树+动态花瓣”组合：树画好一次之后存到离屏Canvas，每帧只贴图+飘落花瓣，这样性能压力小很多。
最后再分享一个我在调试时经常用的小技巧：在animate函数开头用performance.now()记录时间戳，在函数结尾算出耗时，如果超过16.7ms就打印出来。这个方法能帮你快速定位到底是哪一步拖慢了帧率。真到了优化那一步，你至少要有数据支撑，而不是凭感觉瞎改。
本文还有配套的精品资源，点击获取