canvasrenderingcontext2d.filltext(string text, number x, number y, number maxwidth)
基础库 或更高版本; 若版本较低,建议采取 兼容处理 。
支小宝客户端 支持
安诊儿客户端 支持
主体: 企业支付宝小程序 、 个人支付宝小程序
在画实心文本。
此方法直接在画布上绘制内容,不会影响任何路径,因此在这之后调用 fill 或者 stroke 方法不会影响此方法绘制的内容。
若要绘制空心文本,可使用 stroketext
。
效果示例
代码示例执行效果
默认标题0
string text
要填充的文本内容。
number x
文本起点的 x 轴坐标。
number y
文本起点的 y 轴坐标。
number maxwidth
限制文字绘制的最大宽度。可选。如果指定了此值,并且字符串宽度大于此值,那么文字会水平缩小至此宽度。
代码示例
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.font = '30px sans-serif'
ctx.filltext('hello', 100, 50)
ctx.filltext('alipay', 100, 100)
// 限制绘制文字的最大宽度
ctx.filltext('alipay', 100, 150, 60)
})
},
})
<canvas id="canvas" type="2d" onready="oncanvasready">canvas>