lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值,分别是:butt, round and square。默认值是 butt。
画三条带有(butt,round,square)端盖的线:
JavaScript:
<!DOCTYPE html> <html> <head> <title>HTML canvas lineCap 属性的使用(基础教程 (528045.com))</title> </head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.lineWidth = 10; ctx.lineCap = "butt"; ctx.moveTo(20, 20); ctx.lineTo(200, 20); ctx.stroke(); ctx.beginPath(); ctx.lineCap = "round"; ctx.moveTo(20, 40); ctx.lineTo(200, 40); ctx.stroke(); ctx.beginPath(); ctx.lineCap = "square"; ctx.moveTo(20, 60); ctx.lineTo(200, 60); ctx.stroke(); </script> </body> </html>测试看看 ‹/›
IEFirefoxOperaChromeSafari
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineCap 属性。
注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
lineCap属性设置或返回一条线的端盖样式。
注意:"round" 和 "square" 值会使线条略微变长。
默认值: | butt |
---|---|
JavaScript 语法: | context.lineCap="butt|round|square"; |
值 | 描述 |
---|---|
butt | 默认。向线条的每个末端添加平直的边缘。 |
round | 向线条的每个末端添加圆形线帽。 |
square | 向线条的每个末端添加正方形线帽。 |