Canvas 线条末端样式 lineCap
绘制线条时，线条起始和终点的默认演示是平齐的一条线，当然我们可以通过属性 lineCap 改变它
Canvas 提供了三种线条末端样式，分别是 butt 、round 、square
它们的表现如下图
最左边的线用了默认的 butt 。可以注意到它是与辅助线齐平的
中间的是 round 的效果，端点处加上了半径为一半线宽的半圆
右边的是 square 的效果，端点处加上了等宽且高度为一半线宽的方块
Canvas lineCap 属性
属性 lineCap 用户设置如何绘制每一条线段末端的属性
有3个可能的值，分别是：butt, round and square。默认值是 butt
语法
ctx.lineCap = "butt"; ctx.lineCap = "round"; ctx.lineCap = "square";
值说明
| 值 | 说明 |
|---|---|
| butt | 线段末端以方形结束 |
| round | 线段末端以圆形结束 |
| square | 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域 |
范例
下面的代码使用 lineCap 属性绘制以圆形结尾的线段
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-1" width="300" height="150"> </canvas> <script> var c = document.getElementById("canvas-1"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(50,50); ctx.lineWidth = 15; ctx.lineCap = "round"; ctx.lineTo(100, 50); ctx.stroke(); </script>
运行结果如下
范例 2
下面的代码绘制了3条线段， 每条线段都设置了不同的 lineCap 属性值
通过 2 条辅助线能够精确地看到 3 条已绘制线段之间的不同，每条线段的顶端和末端都能在辅助线线上准确的反映出来
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-2" width="300" height="150"> </canvas> <script> var c = document.getElementById("canvas-2"); var ctx = c.getContext("2d"); var lineCap = ['butt','round','square']; // Draw guides ctx.strokeStyle = '#09f'; ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(140,10); ctx.moveTo(10,140); ctx.lineTo(140,140); ctx.stroke(); // Draw lines ctx.strokeStyle = 'black'; for (var i = 0; i < lineCap.length; i++) { ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); ctx.moveTo(25+i*50,10); ctx.lineTo(25+i*50,140); ctx.stroke(); } </script>
运行结果如下