小程序API能力集成指南——画布API汇总（五）

CanvasContext

canvas 组件的绘图上下文。

方法如下（4）：

setLineWidth

CanvasContext.setLineWidth

CanvasContext.setLineWidth(number lineWidth)

功能描述

设置线条的宽度

参数

number lineWidth

线条的宽度，单位 px

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 10);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(5);
ctx.moveTo(10, 30);
ctx.lineTo(150, 30);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(10);
ctx.moveTo(10, 50);
ctx.lineTo(150, 50);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(15);
ctx.moveTo(10, 70);
ctx.lineTo(150, 70);
ctx.stroke();
 
ctx.draw();

setLineJoin

CanvasContext.setLineJoin

CanvasContext.setLineJoin(string lineJoin)

功能描述

设置线条的交点样式

参数

string lineJoin

线条的结束交点样式

lineJoin 的合法值

值	说明
bevel	斜角
round	圆角
miter	尖角

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineJoin('bevel');
ctx.setLineWidth(10);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineJoin('round');
ctx.setLineWidth(10);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineJoin('mit