Canvas 初试 先画个萌萌的五角星

<div class="app">
    <canvas id="canvas" width="800px" height="800px" style="border: 1px solid black"></canvas>
</div>
<script>
    window.onload=function () {
        var canvas=document.getElementById("canvas");

        var context=canvas.getContext("2d");


        darw(context, 100, 150, 400,400 ,30);

        function darw(ctx, r, R, x, y ,deg) {// deg 图片旋转角度

            context.beginPath();

            for (var i=0;i<5;i++){

                context.lineTo(Math.cos((18+i*72-deg)/180*Math.PI)*R+x,
                    -Math.sin((18+i*72-deg)/180*Math.PI)*R+y) ;

                context.lineTo(Math.cos((54+i*72-deg)/180*Math.PI)*r+x,
                    -Math.sin((54+i*72-deg)/180*Math.PI)*r+y);
            }
        }

            context.closePath();
            context.fillStyle=‘yellow‘;
            context.fill();
            context.lineWidth=10;
           /* context.lineJoin=‘round‘*/
             context.lineCap=‘square‘ // butt round square
           //context.miterLimit=10;
          //  context.lineJoin=‘miter‘
             context.stroke();
    }