线条样式属性
lineCap 设置或返回线条的结束端点样式
butt 默认。向线条的每个末端添加平直的边缘。
round 向线条的每个末端添加圆形线帽。
square 向线条的每个末端添加正方形线帽。
lineJoin 设置或返回两条线相交时,所创建的拐角类型
bevel 创建斜角。
round 创建圆角。
miter 默认。创建尖角。
lineWidth 设置或返回当前的线条宽度
number 当前线条的宽度,以像素计
miterLimit 设置或返回最大斜接长度
number 正数。规定最大斜接长度。
如果斜接长度超过 miterLimit 的值,边角会以 lineJoin 的 "bevel" 类型来显示。
<canvas id="c" width="500" height="450" style="border:1px solid #000"></canvas> <script type="text/javascript"> var a=document.getElementById("c"); var ctx=a.getContext("2d"); ctx.beginPath(); //起始一条路径,或重置当前路径 ctx.moveTo(20,20); //把路径移动到画布中的指定点,不创建线条 ctx.lineTo(200,20); //添加一个新点,然后在画布中创建从该点到最后指定点的线条 ctx.lineWidth=5; //设置或返回当前的线条宽度 ctx.lineCap="round"; //向线条的每个末端添加圆形线帽。 ctx.strokeStyle="green"; ctx.stroke(); ctx.beginPath(); ctx.moveTo(20,40); ctx.lineTo(200,40); ctx.lineWidth=5; //设置或返回当前的线条宽度 ctx.lineCap="butt"; //默认。向线条的每个末端添加平直的边缘。 ctx.strokeStyle="blue"; ctx.stroke(); ctx.beginPath(); ctx.moveTo(20,60); ctx.lineTo(200,60); ctx.lineWidth=5; //设置或返回当前的线条宽度 ctx.lineCap="square"; //向线条的每个末端添加正方形线帽。 ctx.strokeStyle="yellow"; ctx.stroke(); ctx.beginPath(); ctx.lineJoin="round"; //设置或返回两条线相交时,所创建的拐角类型 ctx.moveTo(20,80); ctx.lineTo(50,100); ctx.lineTo(20,120); ctx.lineWidth=20; ctx.strokeStyle="red"; ctx.stroke(); ctx.beginPath(); ctx.lineJoin="bevel"; ctx.moveTo(120,80); ctx.lineTo(150,100); ctx.lineTo(120,120); ctx.lineWidth=20; ctx.strokeStyle="red"; ctx.stroke(); ctx.beginPath(); ctx.lineJoin="miter"; ctx.moveTo(220,80); ctx.lineTo(250,100); ctx.lineTo(220,120); ctx.lineWidth=20; ctx.strokeStyle="red"; ctx.stroke(); ctx.beginPath(); ctx.lineWidth=10; ctx.lineJoin="miter"; ctx.miterLimit=5; //设置或返回最大斜接长度,斜接长度指的是在两条线交汇处内角和外角之间的距离 ctx.moveTo(20,150); ctx.lineTo(50,157); ctx.lineTo(20,164); ctx.stroke(); </script>