利用canvas绘制多边形和5角星

绘制多边形,绘制方法封装为createPolygon(cxt,n,dx,dy,size),

• n为n边型
• dx,dy:表示n边型中心坐标
• size:n边型的尺寸

         // 在获取 canvas 对象的前一行，加上下面这行注释，即可获得代码补全
  
  function $$(id){
   return document.getElementById(id)
  }
  /** @type {HTMLCanvasElement} */
  // 获取画布,必须放在获取canvas之前,且中间不可有其他代码

        // 1,获取canvas对象
        let cnc=$$("canvas")
        // 2,获取上下文环境对象context
        let cxt=cnc.getContext("2d")
        // 3,开始绘制图形
    //    调用函数
    createPolygon(cxt,5,100,75,50)
        cxt.fillStyle="HotPink"
        cxt.fill()
       function createPolygon(cxt,n,dx,dy,size) {
        cxt.beginPath()
        let degree=(2* Math.PI)/n
        for(let i=0;i<n;i++){
            let x=Math.cos(i*degree)
            let y=Math.sin(i*degree)
            cxt.lineTo(x*size + dx,y*size +dy)
        }
        cxt.closePath()
       }
    </script>

<canvas id="canvas" width="200" height="200" style="border:1px solid red"></canvas>

<script>
    // 在获取 canvas 对象的前一行，加上下面这行注释，即可获得代码补全

    function $$(id) {
        return document.getElementById(id)
    }
    /** @type {HTMLCanvasElement} */
    // 获取画布,必须放在获取canvas之前,且中间不可有其他代码

    // 1,获取canvas对象
    let cnc = $$("canvas")
    // 2,获取上下文环境对象context
    let cxt = cnc.getContext("2d")
    // 3,开始绘制图形
    //    调用函数


    cxt.beginPath()
    for (let i = 0; i < 5; i++) {
        cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*50+100,   
                    -Math.sin((18+i*72)/180*Math.PI)*50+100);   
    cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*25+100,   
                    -Math.sin((54+i*72)/180*Math.PI)*25+100);   
    }
    cxt.closePath()
    cxt.stroke()
</script>