HTML5画圣诞树教程详解

常见错误是直接写死坐标画三角形——结果树歪、比例崩、缩放失真。正确做法是用递归函数生成分形枝干，再用循环在每层画松针点。

• 先 getContext('2d') 拿到绘图上下文
• 把画布中心设为原点（translate()），方便旋转和对称
• 用递归画主干+左右分支，每次递减长度、偏转角度
• 松针用 fillRect() 或 arc() 随机散点，避免整齐排列的“像素感”

fillStyle 和 shadowColor 决定圣诞树质感

默认黑色线条太生硬，树冠得有深绿到浅绿的过渡，树干要有棕褐+阴影才显立体。关键不是堆颜色，而是利用 canvas 的合成特性：

• fillStyle 设成 gradient（线性/径向），比单色更自然
• 开阴影前必须设 shadowColor、shadowBlur、shadowOffsetX/Y，否则无效
• 阴影要在画树干后、画松针前启用，否则整棵树糊成一团
• 别用 rgba(0,100,0,0.8) 这类半透色叠画——容易发灰，改用深浅两层实色叠加

移动端缩放时 devicePixelRatio 不处理会模糊

在 iPhone 或高分屏上， 实际渲染像素远超这个数，但 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() 里画完，后期想改颜色或加闪烁就只能重写。

到这里，我们也就讲完了《HTML5画圣诞树教程详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！