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>