Canvas高级

1.基本语法

2.封闭区域

线条属性

/*
1.lineWidth：线宽；

2.lineCap:线头；

round:圆头
square:方头和butt的区别是到终点往前伸半个线宽 
butt：（deflaut）
   
3.lineJoin:定义线段的拐点样式；

miter(default):尖角（注：当设置miter时，会受到miterLimit限制
    eg：context.lineJoin = "miter";
        context.miterLimit = 10;
    
        drawStar(400,400,300,20,4,"red");/*太尖的时候就受到限制*/）

bevel：顶点是平头
round：拐点是圆头



*/

矩形

绘制五角星

变换

/*
位移：translate（x，y）

旋转：rotate（deg）

缩放：scale（sx，sy）(缩放会改变边框的粗细)


*/
    context.translate(100,100);
    context.rotate(30/180*Math.PI);
    context.scale(1.5,1);
    context.fillRect(300,300,100,100);
    
    /*利用变换改写五角星函数，实现代码的复用*/
    
    
    
    
    
    

transform

渐变

/*线性渐变*/


/*图片纹理*/

圆弧

/*-------------------------------------------*/
    context.strokeStyle = "red" ;
    context.lineWidth = 10;
    context.beginPath();
    /*圆心半径坐标：x，y，半径，起始角度，结束角度，[true/false(表示顺时针还是逆时针)]*/
    context.arc(400,400,200,0,Math.PI);
    context.stroke();

image.png