canvasrenderingcontext2d.stroketext(string text, number x, number y, number maxwidth)
基础库 或更高版本; 若版本较低,建议采取 兼容处理。
主体: 企业支付宝小程序 、 个人支付宝小程序
在画布上绘制空心的文本。
若要绘制实心文本,可使用 filltext
。
效果示例
代码示例执行效果
string text
要绘制的文本内容。
number x
文本起点的 x 轴坐标。
number y
文本起点的 y 轴坐标。
number maxwidth
绘制的最大宽度。可选。如果指定了值,并且字符串宽度大于此值,那么文字会水平缩小。客户端 10.5.6 及以上版本支持。
代码示例
.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.stroketext('hello', 100, 50)
ctx.stroketext('alipay', 100, 100)
// 限制绘制文字的最大宽度
ctx.stroketext('alipay', 100, 150, 60)
})
},
})
<canvas id="canvas" type="2d" onready="oncanvasready">canvas>