设置线条的交点样式。
String lineJoin
lineJoin 参数说明
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| lineJoin | String | 是 | 线条的结束交点样式 |
值 | 说明 |
|---|---|
| bevel | 斜角 |
| round | 圆角 |
| miter | 尖角 |
Page({
onLoad() {
const canvasContext = xhs.createCanvasContext('myCanvas');
canvasContext.beginPath();
canvasContext.moveTo(10, 10);
canvasContext.lineTo(100, 50);
canvasContext.lineTo(10, 90);
canvasContext.stroke();
canvasContext.beginPath();
canvasContext.setLineJoin('bevel');
canvasContext.setLineWidth(10);
canvasContext.moveTo(50, 10);
canvasContext.lineTo(140, 50);
canvasContext.lineTo(50, 90);
canvasContext.stroke();
canvasContext.beginPath();
canvasContext.setLineJoin('round');
canvasContext.setLineWidth(10);
canvasContext.moveTo(90, 10);
canvasContext.lineTo(180, 50);
canvasContext.lineTo(90, 90);
canvasContext.stroke();
canvasContext.beginPath();
canvasContext.setLineJoin('miter');
canvasContext.setLineWidth(10);
canvasContext.moveTo(130, 10);
canvasContext.lineTo(220, 50);
canvasContext.lineTo(130, 90);
canvasContext.stroke();
canvasContext.draw();
}
});