使用beginPath和closePath可以分别控制各个图形的样式

每个moveTo代表一个新的图形开始，但每次stroke都会把之前设置的状态再次进行绘制

canvas是基于状态的绘图，先设置状态，最后调用绘图方法

不建议使用css来设置canvas的大小，通过属性设置是推荐的方式

Draw an arc use canvas

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)
    
    }

w3c建议不用css的形式去设定大小，要用内联的方式去设定大小。这其中的原因是，设定宽高不仅涉及到显示的画布大小，还有呈现的内容的分辨率问题。

动手敲了下代码：
<Canvas id="canvas" ></Canvas>
<script>
    let tangram = [
        {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
        {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
        {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
        {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
        {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
        {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
        {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
    ];
    window.onload = function () {
        let canvas = document.getElementById("canvas");
        canvas.width=800;
        canvas.height=800;
        let context = canvas.getContext("2d");
        for(let i = 0;i<tangram.length;i++)
            draw(tangram[i],context);
    }
    function draw(piece,cxt) {
        cxt.beginPath();
        cxt.moveTo(piece.p[0].x,piece.p[0].y);
        for( let i=1; i<piece.p.length;i++)
            cxt.lineTo(piece.p[i].x,piece.p[i].y);

        cxt.fillStyle=piece.color;
        cxt.fill();
    }
</script>

canvas绘图:

html中引用标签，<canvas></canvas>默认宽高300，150，大小设定没有单位px。 javascript中设置，canvas.width  canvas.height canvas.getContext('2d') canvas.moveTo起点 canvas.lineTo终点 canvas.stroke确定线条。 canvas.begainPath()开始绘制  canvas.closePath()清楚已有的状态 .lineWith 线条宽度 .strokeStyle线条样式 .fillStyle填充颜色 绘制弧线 context.arc{ centerx(圆心横坐标)centery(圆心纵坐标)radius（半径） startingAngle（弧线起始），endingAngle（弧线终止） anticlockwise=false(可选值：true-逆时针、false-顺时针，默认圆形顺逆方向) }

注：

弧度位置始终是：0，0.5pi，1pi，1.5pi，2pi（顺时针方向开始算起）。

closePath()对fill()没有用，首尾相连。