canvas(1)

<!--
    角度和弧度的关系:
        180° = π rad(弧度单位)
-->
1 , canvas的画布
    let xtc = document.getElementById('canvas').getContext('2d') ; 
2 , canvas的画布大小
    在行间样式设置width和height,否则会出现画布模糊等问题
    <canvas width='600' height='400'></canvas>
    <!--
    或者js设置width和height
    let c = document.getElementById('canvas') ; 
    let cxt = c.getContext('2d') ; 
    c.width = 600 ; 
    c.height = 400 ; 
    -->
3 , canvas中画线
    
    cxt.beginPath() ; <!--开始画线-->
    
    cxt.strokeStyle = 'red' ; <!--颜色-->
    
    cxt.lineWidth = 1;  <!--线的宽度-->
    
    cxt.moveTo(x,y) ; <!--初始点位置-->
    
    cxt.lineTo(x,y) ; <!--第二个点的位置-->
    
    cxt.lineTo(x,y) ; <!--第三个点的位置-->
    
    cxt.closePath() ; <!--闭合画布,会把初始点和结束点连接起来-->
    
    cxt.stroke() ; <!--连线-->
    
    
4 , canvas中的填充
    cxt.beginPath() ; <!--开始画线-->
    
    cxt.moveTo(x,y) ; <!--初始点位置-->
    
    cxt.lineTo(x,y) ; <!--第二个点的位置-->
    
    cxt.lineTo(x,y) ; <!--第三个点的位置-->
    
    cxt.fill() ; <!--填充-->
    --------------------------------------
    cxt.beginPath() ; <!--开始画线-->
    
    cxt.fillStyle = 'red' ; <!--填充颜色-->
    
    cxt.strokeStyle = 'red' ; <!--连线颜色-->
    
    cxt.fillRect(x,y,w,h)/cxt.strokeRect(x,y,w,h)
    <!--
        x:初始点的x轴坐标
        y:初始点的y轴坐标
        w:矩阵的宽度
        h:矩阵的高度
        fillRect():填充
        strokeRect():只会连线不会填充
    -->
    
5 , canvas中的画圆
    cxt.beginPath() ; 
    cxt.arc(x , y , r , begin , end) ; 
    <!--
        x:圆心x轴坐标
        y:圆心y轴的坐标
        r:圆的半径
        begin:起始点的位置(此处是弧度)
        end:结束点的位置(此处是弧度)
        <!--
            begin:0 (0°); 
            end:Math.PI*2 ; (2π)(360°)
        -->
    -->
    cxt.closePath ; 
    cxt.fill()/cxt.stroke() ;