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.     var canvas = document.getElementById("can");
  13.     var ctx = canvas.getContext("2d");
  14.     ctx.beginPath();
  15.     ctx.lineWidth = 15;
  16.     ctx.moveTo(100,100);
  17.     ctx.lineTo(200,100);
  18.     ctx.lineCap = "square";//square:前后都加小方块；round：两端变圆 butt：默认值
  19.     ctx.lineTo(100,150);
  20.     ctx.lineJoin = "round";//round:拐点变圆点 bevel：直接砍掉尖 默认：miter 锋锐
  21.     ctx.miterLimit = 5;//防止值：防止线段出现的尖过于尖锐，做一个预设值
  22.     ctx.stroke();
  23. </script>
  24. </body>