画圆p7p8-2020-01-04

前两章,学了基础矩形和路径
总结方法fillRect() 和 strokeRect() 还有 fillStyle='...' 和 strokeStyle='...'
路径:创建beginPath() 和 closePath() 初始点moveTo() 和 lineTo() 填充用 fill()闭合stroke()

var canvas=$('canvas')[0];
function draw(){
    if (canvas.getContext) {
        var ctx=canvas.getContext('2d');
        for (var i=0;i<4;i++) {
            for(var j=0;j<3;j++){
                ctx.beginPath()
                var x=25+j*50,y=25+i*50,radius=20,startAngel=0,endAngel=Math.PI+(Math.PI * j )/ 2 ;
                var anticlockwise=(i%2)==0?false:true;
                ctx.arc(x,y,radius,startAngel,endAngel,anticlockwise)
                if (i<=1) {
                    ctx.stroke();
                }else{
                    ctx.fill()
                }
            }
        }
    }
}

图片.png