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