canvas绘制五角星通用方法demo

根据慕课网老师的讲解编写通用函数

支持填充色和勾勒边框,设置X,Y方向的偏移量

/*
    * 绘制五角星
    * @params
    * cxt object 绘图上下文环境
    * R int 五角星外围顶点半径
    * r int 内围顶点半径
    * offsetLeft X坐标偏移量
    * offsetTop Y坐标偏移量
    * rot 旋转角度
    * fillColor 填充色
    * strokeColor 边框色
    * strokeWidth 线条宽度
    * */
    function drowStar(cxt,R,r,offsetLeft,offsetTop,rot,fillColor,strokeColor,strokeWidth) {
        rot = arguments[5]?arguments[5]:0;
        fillColor = arguments[6]?arguments[6]:0;
        strokeColor = arguments[7]?arguments[7]:0;
        strokeWidth = arguments[8]?arguments[8]:1;
        cxt.beginPath();
        for(var i =0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+offsetLeft,-Math.sin((18+i*72-rot)/180*Math.PI)*R+offsetTop);
            cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+offsetLeft,-Math.sin((54+i*72-rot)/180*Math.PI)*r+offsetTop);
        }
        cxt.closePath();
        if(fillColor){
            cxt.fillStyle = fillColor;
        }
        if(fillColor){
            cxt.fill();
        }
        if(strokeColor){
            cxt.strokeStyle = strokeColor;
        }
        if(strokeWidth){
            cxt.lineWidth = strokeWidth;
        }
        if(strokeColor || strokeWidth) {
            cxt.stroke();
        }
    }

填充效果