<!DOCTYPE HTML>
<html>
<head>
<title>lineCap</title>
<script type="text/javascript">
function draw(){
var cxt = document.getElementById("myCanvas").getContext("2d");
var lineCap = ['butt','round','square'];
cxt.strokeStyle="red";
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(140,10);
cxt.moveTo(10,140);
cxt.lineTo(140,140);
cxt.stroke();
cxt.strokeStyle="green";
for (i=0; i<lineCap.length; i++)
{
cxt.lineWidth=15;
cxt.lineCap=lineCap[i];
cxt.beginPath();
cxt.moveTo(25+i*50,10);
cxt.lineTo(25+i*50,140);
cxt.stroke();
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" width="200" height="200" style="border:2px solid #06f;"></canvas>
</body>
</html>
显示效果如下：
【lineCap 的值决定了线段端点显示的样子。它可以为下面的三种的其中之一：butt，round 和 square。默认是 butt。实例绘制了三条直线，分别赋予不同的 lineCap 值。还有两条辅助线，为了可以看得更清楚它们之间的区别，三条线的起点终点都落在辅助线上。最左边的线用了默认的 butt 。可以注意到它是与辅助线齐平的。中间的是 round 的效果，端点处加上了半径为一半线宽的半圆。右边的是 square 的效果，端点出加上了等宽且高度为一半线宽的方块。】