设置线条的端点样式。
String lineCap
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| lineCap | String | 是 | 线条的结束端点样式 |
属性 | 类型 |
|---|---|
| butt | 向线条的每个末端添加平直的边缘 |
| round | 向线条的每个末端添加圆形线帽 |
| square | 向线条的每个末端添加正方形线帽 |
Page({
onLoad() {
const canvasContext = xhs.createCanvasContext('myCanvas');
canvasContext.beginPath();
canvasContext.moveTo(30, 10);
canvasContext.lineTo(200, 10);
canvasContext.stroke();
canvasContext.beginPath();
canvasContext.setLineCap('butt');
canvasContext.setLineWidth(10);
canvasContext.moveTo(50, 30);
canvasContext.lineTo(200, 30);
canvasContext.stroke();
canvasContext.beginPath();
canvasContext.setLineCap('round');
canvasContext.setLineWidth(10);
canvasContext.moveTo(70, 50);
canvasContext.lineTo(200, 50);
canvasContext.stroke();
canvasContext.beginPath();
canvasContext.setLineCap('square');
canvasContext.setLineWidth(10);
canvasContext.moveTo(90, 70);
canvasContext.lineTo(200, 70);
canvasContext.stroke();
canvasContext.draw();
}
});