CanvasRenderingContext2D.lineCap

CanvasRenderingContext2D.lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt, round and square。默认值是 butt。

参见 Canvas Tutorial 中的 Applying styles and color 章节。

语法

ctx.lineCap = "butt";
ctx.lineCap = "round";
ctx.lineCap = "square";

选项

butt
线段末端以方形结束。
round
线段末端以圆形结束。
square
线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

示例

使用 lineCap 属性

这是一段简单的代码片段，使用 lineCap 属性绘制以圆形结尾的线段。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();

修改下面的代码并在线查看 canvas 的变化：

lineCap 例子

在这个例子中绘制了3条线段， 每条线段都设置了不同的 lineCap 属性值。通过2条导航线能够精确地看到3条已绘制线段之间的不同。 每条线段的顶端和末端都能在导航线上准确的反映出来。

左侧的线段使用了默认值 butt ， 和导航线是完全平齐的。 第二条线段使用了 round 选项，在线段末端增加了一个半径为线短宽度一半的半圆。右侧的线段使用了 square 选项，增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

var ctx = document.getElementById('canvas').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();
}

ScreenshotLive sample

规范描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.lineCap		 Living Standard  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
  • 在基于WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 ctx.setLineCap() 。

参见