1、圆角矩形：

  1. <style>
  2.     canvas{
  3.         width: 500px;
  4.         height: 300px;
  5.         border: 1px solid;
  6.     }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="can" width="500px" height="300px"></canvas>
  11. <script>
  12. //    圆角矩形：
  13. var canvas = document.getElementById('can');
  14. var ctx = canvas.getContext('2d');
  15. ctx.moveTo(100,110);//起点:注意要多出10px的圆角长度
  16. ctx.arcTo(100,200,200,200,10)//B点，C点：没有实际的线段，只是方向，10：圆角有多长
  17. ctx.arcTo(200,200,200,100,10);
  18. ctx.arcTo(200,100,100,100,10);
  19. ctx.arcTo(100,100,100,200,10);
  20. ctx.stroke();
  21. </script>
  22. </body>