-
- 论斤烤 2020-12-02
三种样式区别
-
截图0赞 · 0采集
-
- 论斤烤 2020-12-02
端点样式代码例子
-
截图0赞 · 0采集
-
- 论斤烤 2020-12-02
lineCap线条端点样式
-
截图0赞 · 0采集
-
- 慕姐8207076 2020-01-15
linecap只能作用在线段首尾，中间不可
lineCap = "square"，可以让线段闭合处的缺口闭合
- 0赞 · 0采集
-
- pinzaghi 2019-12-03
建议使用closePath来封闭多边形
-
截图0赞 · 0采集
-
- pinzaghi 2019-12-03
round和square为圆角头和方角头，butt没有线段头
-
截图0赞 · 0采集
-
- Sandaydi 2019-02-27
线条属性
lineCap — 线条帽子：
+ butt (default)
+ round 圆头
+ square 方头
注意：lineCap只能用于线段的开始处和结尾处
- 0赞 · 0采集
-
- 慕码人8705899 2019-01-18
可以设置context.lineCap="square"来封闭多边形，但是不推荐，还是推荐使用closePath()来封闭多边形
-
截图0赞 · 0采集
-
- 慕码人8705899 2019-01-18
注意，只有线段的两个端点才会应用lineCap属性。比如这个箭头的末端是圆润的因为设置了context.lineCap="round"; 而其他接点都是正常的
-
截图0赞 · 0采集
-
- 慕码人8705899 2019-01-18
三条线条分别设置了不同的lineCap
1、context.lineCap = "butt";2、context.lineCap = "round";
3、context.lineCap = "square";
-
截图0赞 · 0采集
-
- 慕仰1163640 2018-08-29
lineCap：设置线条两段的形状
butt(default)
round
square
lineCap:只能用于线段的开始处和结尾处，不能用于连接处。
- 1赞 · 1采集
-
- 慕村3232222 2018-08-21
lineCap设置线条的帽子：butt（默认）、round、square。后两者绘制出的线条都要长一些（戴上了帽子）。lineCap适用于线条的起始处和结尾处不适用于连接处。
通常绘制一个封闭的多边形用beginPath()和closePath()（推荐），但也可以不用closePath()而用lineCap = “square”来实现
-
截图1赞 · 1采集
-
- xxy流沙 2018-04-22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lineCap</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid black;display: block;margin:10px auto;"></canvas>
<script type="text/javascript">
window.onload=function(){
var c=document.getElementById("canvas");
c.width=800;
c.height=500;
var ctx=c.getContext("2d");
//使用canvas绘图
/*
*lineCap属性
* 属性值：
* butt(default)
* round:会突出一个圆形的头
* square：会突出一个方形的头
*/
ctx.lineWidth=10;
ctx.strokeStyle="#058";
ctx.beginPath();
ctx.moveTo(100,100);//定义线条开始坐标
ctx.lineTo(200,100)//线条结束坐标
ctx.lineCap="butt";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,200);//定义线条开始坐标
ctx.lineTo(200,200)//线条结束坐标
ctx.lineCap="round";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,300);//定义线条开始坐标
ctx.lineTo(200,300)//线条结束坐标
ctx.lineCap="square";
ctx.stroke();
}
</script>
</body>
</html>- 0赞 · 0采集
-
- 慕粉4189335 2018-02-27
- `lineCap = 'square'` 可以用作封闭图形线框，但是不推荐使用；推荐使用 `ctx.closePath()`方法。
- 0赞 · 0采集
-
- 左小珍 2018-01-23
- Canvas绘图详解 3-1 线条的帽子 lineWidth = "" lineCap = "butt(default)/round/square" 用于设置线条两端的形状不能用于线段的连接处 总结：让线条之间的空隙补上方法有lineCap：square和 closePath自动把空隙补上。一般建议使用closePath
-
截图0赞 · 0采集
-
- qq_简单点_14 2017-09-14
- 线条末端形状 lineCap: butt(方头)、round(圆头)、square(方头)
- 0赞 · 2采集
-
- jlz 2017-06-30
- canvas的线条，stroke是从指定路径往两边扩展 lineWidth 的一半 来绘制的
-
截图0赞 · 0采集
-
- qq_青山尚葱_03442614 2017-05-21
- ctx.lineCap="butt|round|square";
- 0赞 · 0采集
-
- 彬彬有理0 2017-02-28
- lineCap - butt(default) / round / square
- 0赞 · 0采集
-
- 慕粉1956174443 2017-01-26
- 线段开始和结束是应用LineCAP，而线段间的连接处仍然是尖角。
- 0赞 · 0采集
-
- 慕粉4145174 2016-12-15
- 线条的帽子：设置线条两边的形状
-
截图0赞 · 0采集
-
- qq_星星点点_1 2016-12-13
- 交合的地方产生一半像素的空隙的方法：1、closePath(); 2、context.lineCap="square"
-
截图0赞 · 0采集
-
- 猎八哥 2016-12-10
- context.closePath(); 解决 线段缝隙问题 不过现在context.lineCap = "square";也可以解决
- 0赞 · 0采集
-
- 慕仔1661316 2016-10-29
- ctx.lineCap="butt|round|square";
- 0赞 · 0采集
-
- mikyxiuting 2016-10-04
- line-cap
-
截图0赞 · 0采集
-
- Luke丶Y 2016-08-18
- 线条属性
-
截图0赞 · 0采集
-
- 冷眼看尽繁华丿 2016-07-19
- linecap = "butt,round,square",标准型，圆形，方形。
-
截图0赞 · 3采集
-
- Sturrbon 2016-07-05
- lineCap = round 线段衔接处不变形
- 0赞 · 0采集
-
- elaine2 2016-05-06
- lineCap只能用于线段的开始处和结尾处，不能用于线段的连接处
- 0赞 · 0采集
-
- Hank_桁 2016-05-05
- context.lineCap="butt/round/square"//描绘线条两端的形状（方圆）
- 0赞 · 0采集
