小程序开放平台

文档中心
基础
路由
跳转
转发
界面
网络
支付
数据缓存
媒体
位置
开放接口
设备
XHSML
性能
第三方平台
文件
数据分析
画布
createCanvasContext
canvasPutImageData
canvasGetImageData
canvasToTempFilePath
CanvasContext
setFillStyle
setStrokeStyle
setShadow
createLinearGradient
createCircularGradient
addColorStop
setLineWidth
setLineCap
setLineJoin
setLineDash
setMiterLimit
rect
fillRect
strokeRect
clearRect
fill
stroke
beginPath
closePath
moveTo
lineTo
arc
scale
rotate
translate
setFontSize
fillText
setTextAlign
setTextBaseline
drawImage
setGlobalAlpha
measureText
strokeText
setLineDashOffset
bezierCurveTo
quadraticCurveTo
save
restore
draw
setTransform

xhs.setLineCap

开发
>
JS API
>
画布
>
CanvasContext
>
setLineCap
>
更新时间:2024-11-13 19:05:32

设置线条的端点样式。

参数

String lineCap

lineCap 参数说明

属性
类型
默认值
必填
说明
最低版本
lineCapString线条的结束端点样式

lineCap 的合法值

属性
类型
butt向线条的每个末端添加平直的边缘
round向线条的每个末端添加圆形线帽
square向线条的每个末端添加正方形线帽

示例代码

Page({
    onLoad() {
        const canvasContext = swan.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();
    }
});