canvas封装简单图形方法记录

		//封装正多边形 page28 (起点右顶点逆时针)
        // 边数 中心点坐标 中心点距离顶点距离  
        // 调用createPolygon(ctx,5,100,100,50);
        function createPolygon(ctx,n,dx,dy,size){
            ctx.beginPath();
            var degree = (2 * Math.PI) / n;
            for(var i=0;i<n;i++){
                var x = Math.cos(i * degree);
                var y = Math.sin(i * degree);
                ctx.lineTo(x * size + dx,y * size + dy);
            }
            ctx.closePath();
            ctx.stroke()
        }

        //封装五角星 page31 (起点右顶点逆时针)
        // 外接圆半径 内切圆半径 中心点距离左上角坐标
        // createFivePontedStar(ctx,100,40,100,100)
        function createFivePontedStar(ctx,bigR,smallR,dx,dy){
            ctx.beginPath();
            for(var i=0;i<5;i++){
                ctx.lineTo(
                    Math.cos((18 + 72 * i) * Math.PI / 180) * bigR + dx,
                    dy - Math.sin((18 + 72 * i) * Math.PI / 180) * bigR
                );
                ctx.lineTo(
                    Math.cos((54 + 72 * i)* Math.PI / 180) * smallR + dx,
                    dy - Math.sin((54+72 * i) * Math.PI / 180) * smallR
                );
            }
            ctx.closePath();
            ctx.stroke();
        }

        //封装圆角矩形 page46 (起点左上角顺时针)
        // 矩形宽 矩形高 圆角半径 矩形距离绘制区域左上角距离
        // 调用createRoundRect(ctx,150,120,30,20,20)
        function createRoundRect(ctx,width,height,r,offsetX,offsetY){
            ctx.beginPath();
            ctx.moveTo(offsetX + r, offsetY);
            ctx.lineTo(offsetX + width - r, offsetY);
            ctx.arcTo(offsetX + width, offsetY, offsetY + width, offsetY + r, r);
            ctx.lineTo(offsetX + width, offsetY + height - r);
            ctx.arcTo(offsetX + width, offsetY + height,offsetY + width - r,offsetY + height, r);
            ctx.lineTo(offsetX + r,offsetY + height);
            ctx.arcTo(offsetX, offsetY + height, offsetX, offsetY + height - r, r);
            ctx.lineTo(offsetX, offsetY + r);
            ctx.arcTo(offsetX , offsetY, offsetX + r, offsetY, r);
            ctx.closePath();
            ctx.stroke();
        }

        //封装n叶草 page53 (起点下顶点逆时针)
        // 瓣数 中心点坐标 中心至下顶点距离(控制花朵大小) 花瓣大小
        // 调用createLeaf(ctx,4,100,100,20,80)
        function createLeaf(ctx,n,dx,dy,size,length){
            ctx.beginPath();
            ctx.moveTo(dx, dy + size);
            var degree = 2 * Math.PI / n;
            for(var i=1;i<n+1;i++){
                //计算控制点坐标
                var cx1 = Math.sin((i - 1) * degree) * length + dx;
                var cy1 = Math.cos((i - 1) * degree) * length + dy;
                var cx2 = Math.sin(i * degree) * length + dx;
                var cy2 = Math.cos(i * degree) * length + dy;
                //计算结束点坐标
                var x = Math.sin(i * degree) * size + dx;
                var y = Math.cos(i * degree) * size + dy;
                ctx.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);
            }
        }
    
         //封装扇形 page56 (起点右顶点顺时针)
         // 圆心坐标 半径 起始角度 终止角度
         // 调用 createFan(ctx,100,100,50,30,120)
         function createFan(ctx,dx,dy,r,angle1,angle2){
             ctx.beginPath();
        
             ctx.moveTo(dx,dy);
             ctx.arc(dx,dy,r,angle1 * Math.PI / 180,angle2 * Math.PI / 180,false);
             ctx.closePath();
             ctx.stroke();
         }