用<canvas>画圣诞树最可控，需用递归生成分形枝干、循环绘制松针，适配devicePixelRatio防模糊，并通过globalCompositeOperation分层叠加装饰。
用 <canvas> 画圣诞树最可控
纯 HTML 标签（比如 <div> 堆叠）只能做极简示意，真要控制枝干角度、松针密度、光影渐变，必须上 <canvas>。它本质是一块位图画布，所有线条、颜色、变换都靠 JS 指令逐笔绘制，自由度高，也方便加动画或交互。
常见错误是直接写死坐标画三角形——结果树歪、比例崩、缩放失真。正确做法是用递归函数生成分形枝干，再用循环在每层画松针点。
- 先
getContext('2d')拿到绘图上下文 - 把画布中心设为原点（
translate()），方便旋转和对称 - 用递归画主干+左右分支，每次递减长度、偏转角度
- 松针用
fillRect()或arc()随机散点，避免整齐排列的“像素感”
fillStyle 和 shadowColor 决定圣诞树质感
默认黑色线条太生硬，树冠得有深绿到浅绿的过渡，树干要有棕褐+阴影才显立体。关键不是堆颜色，而是利用 canvas 的合成特性：
-
fillStyle设成gradient（线性/径向），比单色更自然 - 开阴影前必须设
shadowColor、shadowBlur、shadowOffsetX/Y，否则无效 - 阴影要在画树干后、画松针前启用，否则整棵树糊成一团
- 别用
rgba(0,100,0,0.8)这类半透色叠画——容易发灰，改用深浅两层实色叠加
移动端缩放时 devicePixelRatio 不处理会模糊
在 iPhone 或高分屏上，<canvas width="400" height="600"> 实际渲染像素远超这个数，但 canvas 默认按 CSS 尺寸渲染，导致图像模糊、锯齿明显。
立即学习“前端免费学习笔记（深入）”；
必须手动适配设备像素比：
- 读取
window.devicePixelRatio - 把 canvas 的
width和height属性放大对应倍数（不是 style！） - 再用 CSS 把 canvas 缩回视觉尺寸，例如
style="width:400px;height:600px;" - 最后调用
ctx.scale(dpr, dpr)，让所有绘图指令自动适配
漏掉任何一步，树就糊了——尤其松针这种细小元素，模糊后直接看不清。
加星星和彩球要用 globalCompositeOperation 分层
直接在树上画圆点容易被树冠遮住，或和绿色混成脏色。真实做法是分三步：先画树冠（source-over），再切合成模式画装饰（lighter 或 screen），最后画树干（source-over）压底。
- 彩球用
globalCompositeOperation = 'screen'，能透出底色又提亮 - 顶部星星用
'lighter'叠加多层黄色，模拟发光效果 - 所有装饰点坐标要基于树的几何结构生成（比如在每层枝干末端 ± 随机偏移），不能随机撒点
- 避免用
strokeStyle画边框——彩球边缘会虚化，改用两层同心圆：内实色 + 外浅色模糊
树越复杂，分层逻辑越重要；混在一个 fill() 里画完，后期想改颜色或加闪烁就只能重写。
