lineCap:线末端的类型。butt、square、round
lineJoin相交线的拐点:miter(默认) round bevel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas绘制镂空的四边形</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var myCanvas=document.getElementById("canvas");
ctx=myCanvas.getContext("2d");
ctx.beginPath(); //开启新路径,上边的画图与我无关
ctx.moveTo(100,100);
ctx.lineTo(150,50);
ctx.lineTo(200,100);
ctx.strokeStyle="green"; //颜色
ctx.lineWidth=10; //线宽
ctx.lineCap="butt"; //默认属性,没有线帽
ctx.lineJoin="mitor"; //默认属性,
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(150,150);
ctx.lineTo(200,200);
ctx.strokeStyle="blue";
ctx.lineWidth=20;
ctx.lineCap="square"; //增加一个四方形 线帽
ctx.lineJoin="bevel"; //
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(150,250);
ctx.lineTo(200,300);
ctx.strokeStyle="red";
ctx.lineCap="round"; //增加一个圆边 线帽
ctx.lineJoin="round";
ctx.lineWidth=30;
ctx.stroke();
</script>
</body>
</html>