arcTo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>arcTo示意</title>

</head>
<body>
    <canvas id="ourCanvas" width="500" height="500" style="border:3px dashed #0094ff"></canvas>
   <script>
       /*该方法表示绘制多个路径
       n表示个数
       dx、dy控制n角星的位置
       size控制n角星的大小

       */
       function createStar(context,n,dx,dy,size) {
           //开始创建路径
           context.beginPath();
           var dig = Math.PI / n * 4;
           for (var i = 0; i < n; i++) {
               var x = Math.sin(i * dig);
               var y = Math.cos(i * dig);
               context.lineTo(x * size + dx, y * size + dy);

           }
           context.closePath();
       }
       var canvas = document.getElementById("ourCanvas");
       var ctx = canvas.getContext("2d");
       createStar(ctx, 3, 60,60, 50);
       ctx.fillStyle = "#ff0";
       ctx.fill();

       createStar(ctx, 5, 100, 150, 60);
       ctx.fillStyle = "#f00";
       ctx.fill();

       createStar(ctx, 9, 100,280, 80);
       ctx.fillStyle = "#ccc";
       ctx.fill();
    </script>
</body>
</html>