Canvas(2)

6 , canvas中的文字
    cxt.font = "italic small-caps bold 12px arial"; 
    <!--
        font:设置字体大小和字体的样式
        italic:斜体
        small-caps:规定字体变体
        bold:加粗
        12px:字体大小
        arial:字体样式
    -->
    cxt.textAlign = 'start' ; 
    <!--
        文本的对齐方式
            start	默认。文本在指定的位置开始。
            end	文本在指定的位置结束。
            center	文本的中心被放置在指定的位置。
            left	文本左对齐。
            right	文本右对齐。
    -->
    cxt.textBaseline = 'top' ; 
    
    <!--
        文本基线
            alphabetic	默认。文本基线是普通的字母基线。
            top	文本基线是 em 方框的顶端。。
            hanging	文本基线是悬挂基线。
            middle	文本基线是 em 方框的正中。
            ideographic	文本基线是表意基线。
            bottom	文本基线是 em 方框的底端。
    -->
    cxt.measureText(text).width;
    <!--
        cxt.measureText(text)返回值是文本对象
        该对象包含以像素计的指定字体宽度
    -->
    cxt.fillText(text ,x , y ,maxWidth)
    <!--
        text:文字内容
        x:内容的x轴坐标
        y:内容的y轴坐标
        maxWidth:最大的宽度
    -->

7 , canvas中的矩阵
    (1):矩阵的创建
        cxt.strokeRect(x,y,w,h)/cxt.fillRect(x,y,w,h) ;
        <!--
            strokeRect() 不填充
            fliiRect() 填充
            x:起始点x轴坐标
            y:起始点y轴坐标
            w:宽度
            h:高度
        -->
        ---------------------------------------
        cxt.rect(x,y,w,h) ; 
        cxt.stroke()/cxt.fill() ;
        ---------------------------------------
    (2):矩阵的清除
        cxt.clearRect(x,y,w,h) ; 
        <!--
            x:起始点x轴坐标
            y:起始点y轴坐标
            w:宽度
            h:高度
        -->
    
    (3):矩阵的剪切
        <!--
            //剪切的区域,剪切之后画布
            //只能从剪切区域开始 0点会发生改变
            cxt.rect(50,20,200,120);
            cxt.stroke();
            cxt.clip();
            
            cxt.fillStyle="green";
            cxt.fillRect(0,0,150,100);
        -->
8 , canvas中的弧线的绘制
    cxt.arcTo(x1, y1, x2, y2, r)
    <!--
        端点1(x1,y1)
        端点2(x2,y2)
        半径(r)
        绘制的弧度要与两线相切
    -->
9 , canvas中的渐变
    (1):创建线性渐变
        let lgd = createLinearGradient(x1,y1,x2,y2) ; 
        <!--
            x1:渐变开始点
            y1:渐变开始点
            x2:渐变结束点
            y2:渐变结束点
        -->
        lgd.addColorStop(0.5,red) ; 
        lgd.addColorStop(1,black) ; 
        <!--
            addColorStop(0.5 , red) ; 
            red颜色所占的百分比
        -->
        cxt.fillStyle = lgd ; 
        <!--
            将样式设置为lgd的样式
        -->
        cxt.fillRect(x,y,w,h) ; 
    
    (2):创建径向渐变
        let rgd = createcreateRadialGradient(x0,y0,r0,x1,y1,r1);
        <!--
            x0:初始圆的圆心x
            y0:初始圆的圆心y
            r0:初始圆额半径
            x1:结束圆的圆心x
            y1:结束圆的圆心y
            r1:结束圆的半径
        -->
        rgd.addColorStop(0.5,red) ; 
        rgd.addColorStop(1,black) ; 
        <!--
            addColorStop(0.5 , red) ; 
            red颜色所占的百分比
        -->
        cxt.fillStyle = rgd; 
        <!--
            将样式设置为lgd的样式
        -->
        cxt.fillRect(x,y,w,h) ; 

10 , canvas中的阴影效果
    (1): cxt.shadowColor = '#ccc' ; <!--阴影颜色-->
    
    (2):cxt.shadowBlur = 20 ; <!-- 模糊度-->
    
    (3):cxt. shadowOffsetX = '20px' <!-- x轴偏移量-->
    
    (4):cxt. shadowOffsetY = '20px' <!-- y轴偏移量-->
    
11 , canvas中的transform
    (1):缩放(scale)
        <!--
            cxt.scale(width,height) ; 
            1 = 100% ; 
            2 = 200% ; 
            .........
        -->
    (2):旋转(rotate)
        <!--
            ctx.rotate(deg) ; 
            注意此处是弧度
        -->
    (3):偏移(translate)
        <!--
            ctx.translate(x,y) ; 
        -->
    (4):矩阵(transform)
        <!--
            ctx.transform(1,0.5,-0.5,1,30,10)
        -->
    (5):重置矩阵(setTransform)
        <!--
            ctx.setTransform(1,0.5,-0.5,1,30,10)
        -->