HTML5 Canvas+JS分层实现时钟秒针不显示问题排查

代码存在两处逻辑问题，均不会触发控制台运行时报错，直接导致秒针不可见：

1. 图层绘制分支的case值重复（核心原因） #

负责按图层绘制旋转指针的fDrawAsRotatedInLayer函数中，switch分支出现了重复的判断值：

switch (x) {
    case 1:
        ctx_l1.rotate(angle * DEGRESS_TO_RADIANS);
        ctx_l1.drawImage(image, 0 - HALF_HEIGHT, 0 - HALF_WIDTH);
        break;
    case 2:
        ctx_l2.rotate(angle * DEGRESS_TO_RADIANS);
        ctx_l2.drawImage(image, 0 - HALF_HEIGHT, 0 - HALF_WIDTH);
        break;
    case 3:
        ctx_l3.rotate(angle * DEGRESS_TO_RADIANS);
        ctx_l3.drawImage(image, 0 - HALF_HEIGHT, 0 - HALF_WIDTH);
        break;
    case 3: // 笔误，此处应为case 4
        ctx_l4.rotate(angle * DEGRESS_TO_RADIANS);
        ctx_l4.drawImage(image, 0 - HALF_HEIGHT, 0 - HALF_WIDTH);
        break;
    default:
        break;
}

绘制秒针时调用该函数传入的图层参数是4，但分支里没有定义case 4，参数传入后直接走空的default分支，秒针的绘制逻辑根本不会执行。
JavaScript语法允许switch出现重复case值，运行时只会执行第一个匹配到的分支，后续同值分支会被直接忽略，因此不会抛出任何错误，控制台无提示。
修复方法：将第二个重复的case 3修改为case 4即可让秒针正常绘制。

2. 顶层图层绘制顺序存在遮挡隐患 #

z-index最高的clock_layer4图层当前绘制顺序为：

• 先绘制顶层表盘素材clock_face_top
• 后绘制秒针
  修复第一个问题后秒针会显示在顶层素材上方。如果clock_face_top是仅包含中心轴盖的局部透明素材不会有问题，如果是全尺寸不透明素材会遮挡下方所有图层的指针（从当前时针、分针正常显示的情况判断，该素材应为局部轴盖）。如果需要让中心轴盖盖住秒针根部，将clock_face_top的绘制代码移到秒针绘制逻辑之后即可。

其他不影响运行但建议修正的细节 #

• 变量名拼写错误：角度转弧度的变量DEGRESS_TO_RADIANS正确拼写应为DEGREES_TO_RADIANS，当前不影响运行是因为所有调用位置都使用了错写的变量名，属于可读性问题。
• 资源加载监听不全：仅给底图clock_face_base绑定了onload回调就启动动画，其他素材如果加载慢于底图，首次绘制时会出现空绘，建议等所有图片资源加载完成后再启动动画循环。
• 冗余参数：代码中所有Math.floor调用都传入了第二个参数0，该方法仅接收1个参数，传入的第二个参数会被直接忽略，属于无效写法。

内容的提问来源于stack exchange，提问作者Leezard