Render a digit原理图

格子系统，应用十分广泛?

计算方式计算方式

使用格子系统来计算坐标

圆心计算公式

绘制点阵数字计算

3-2 倒计时数字钟的具体绘制

3-2 倒计时数字钟的具体绘制

3-2 倒计时数字钟的具体绘制

beginPath();重新绘制；有closePath;时会封闭所绘制的图形

计算圆心位置

面向对象的方式来写条理清晰多了

圆心位置计算

单个数字绘图循环

圆心位置的计算

小圆圆心计算方法

数字中，小圆点位置分析

通过格子方法画出一个字

绘画盒子计算方式！

window.onload=function (ev) {

        var Canvas = document.getElementById("newCanvas");
        var Canvas2D = Canvas.getContext("2d");
        Canvas2D.strokeStyle = "#0099cc";
        Canvas2D.fillStyle = "#0099cc";
        var FiveF = [0,8,16,21,29,37,42,50];
    
        function DrawTime(Canvas2D,Times,Radius,Spacing,MarginT,MarginL){
            Canvas2D.clearRect(0,0,1212,602);
            for(var i = 0;i < Times.length;i++){
                if(Times[i]==":"){
                    var thisF = digit[digit.length-1];
                }else{
                    var thisF = digit[Times[i]];
                }
                for(var ii = 0;ii < thisF.length;ii++){
                    var thisF_Row = thisF[ii];
                    for(var iii = 0;iii < thisF_Row.length;iii++){
                        Canvas2D.beginPath();
                        Canvas2D.arc(
                            (Radius*2 + Spacing)*iii + MarginT + FiveF[i]*(Radius*2 + Spacing),
                            (Radius*2 + Spacing)*ii + MarginL,
                            Radius,
                            0*Math.PI,
                            2*Math.PI,
                            false
                        );
                        // Canvas2D.stroke();
                        if(thisF_Row[iii]==1){
                            Canvas2D.fill();
                        }
                    }
                }
            }
        }

        setInterval(function(){
            var Hour = new Date().getHours().toString();
            var Minute = new Date().getMinutes().toString();
            var Seconds = new Date().getSeconds().toString();
            if(Hour.length==1){
                Hour = "0" + Hour;
            }
            if(Minute.length==1){
                Minute = "0" + Minute;
            }
            if(Seconds.length==1){
                Seconds = "0" + Seconds;
            }
            var Times = Hour +":"+ Minute +":"+ Seconds;
            DrawTime(Canvas2D,Times,8,3,40,170);
        },1000)
    
    }