以下是一个示例,演示了如何在 Canvas 中绘制左对齐、右对齐、居中对齐的文本:
Page({
onReady: function () {
const ctx = wx.createCanvasContext('myCanvas');
// 设置画布大小
const canvasWidth = 300;
const canvasHeight = 150;
// 设置文本样式
ctx.setFontSize(20);
ctx.setFillStyle('black');
// 文本内容
const text = '文字对齐';
// 左对齐
ctx.setTextAlign('left');
ctx.setTextBaseline('middle');
ctx.fillText(text, 20, canvasHeight / 4);
// 中间对齐
ctx.setTextAlign('center');
ctx.setTextBaseline('middle');
ctx.fillText(text, canvasWidth / 2, canvasHeight / 2);
// 右对齐
ctx.setTextAlign('right');
ctx.setTextBaseline('middle');
ctx.fillText(text, canvasWidth - 20, (3 * canvasHeight) / 4);
// 绘制到 canvas 上
ctx.draw();
}
});
在这个示例中,我们通过 setTextAlign 设置了文字的水平对齐方式,分别为左对齐('left')、中间对齐('center')和右对齐('right')。同时,通过 setTextBaseline 设置了文字的垂直对齐方式为居中('middle')。
你可以根据实际需求,使用这两个方法来调整文字在 Canvas 中的对齐方式。
转载请注明出处:http://www.zyzy.cn/article/detail/1003/微信小程序