Canvas动画转视频-前段框架whammy，阿里一线架构师技术图谱

            ctx.lineTo(120,0);

            ctx.stroke();

        }

        ctx.rotate(Math.PI/30);

    }

    ctx.restore();

    

    var sec = now.getSeconds();

    var min = now.getMinutes();

    var hr  = now.getHours();

    hr = hr>=12 ? hr-12 : hr;

    

    ctx.fillStyle = "black";

    

    // write Hours

    ctx.save();

    ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )

    ctx.lineWidth = 14;

    ctx.beginPath();

    ctx.moveTo(-20,0);

    ctx.lineTo(80,0);

    ctx.stroke();

    ctx.restore();

    

    // write Minutes

    ctx.save();

    ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )

    ctx.lineWidth = 10;

    ctx.beginPath();

    ctx.moveTo(-28,0);

    ctx.lineTo(112,0);

    ctx.stroke();

    ctx.restore();

    

    // Write seconds

    ctx.save();

    ctx.rotate(sec * Math.PI/30);

    ctx.strokeStyle = "#D40000";

    ctx.fillStyle &#