微信小程序设置文本左对齐居中对齐右对齐setTextAlign的使用说明

微信官方说明文档如下。特别注意:

对齐方式的基准点,是以整个画布的宽度的一半的中心轴为基准线。

左对齐:即文本左侧贴向中心y轴。

居中对齐:即文本以中心y轴对齐。

右对齐:即文本右侧贴向中心轴y。

const ctx = wx.createCanvasContext('myCanvas')

ctx.setStrokeStyle('red')
ctx.moveTo(150, 20)
ctx.lineTo(150, 170)
ctx.stroke()

ctx.setFontSize(15)
ctx.setTextAlign('left')
ctx.fillText('textAlign=left', 150, 60)

ctx.setTextAlign('center')
ctx.fillText('textAlign=center', 150, 80)

ctx.setTextAlign('right')
ctx.fillText('textAlign=right', 150, 100)

ctx.draw()

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序的圆环可以通过使用 canvas 组件来实现。 首先,在 wxml 文件中添加 canvas 组件,并设置宽高: ```html <canvas canvas-id="progress" style="width: 200px; height: 200px;"></canvas> ``` 然后,在 js 文件中获取 canvas 的上下文并绘制圆环: ```javascript // 获取 canvas 上下文 const context = wx.createCanvasContext('progress') // 圆环半径 const radius = 80 // 圆环宽度 const lineWidth = 10 // 圆环起始角度 const startAngle = -Math.PI / 2 // 圆环结束角度 const endAngle = Math.PI * 2 - Math.PI / 2 // 绘制底部圆环 context.beginPath() context.setStrokeStyle('#ddd') // 圆环颜色 context.setLineWidth(lineWidth) // 圆环宽度 context.arc(100, 100, radius, startAngle, endAngle, false) context.stroke() // 绘制进度圆环 context.beginPath() context.setStrokeStyle('#33aaff') // 圆环颜色 context.setLineWidth(lineWidth) // 圆环宽度 context.setLineCap('round') // 圆环末端样式 context.arc(100, 100, radius, startAngle, endAngle * progress / 100 - Math.PI / 2, false) context.stroke() // 绘制进度百分比文本 context.setFillStyle('#33aaff') // 文字颜色 context.setFontSize(20) // 文字大小 context.setTextAlign('center') // 文字居中 context.setTextBaseline('middle') // 文字垂直居中 context.fillText(progress + '%', 100, 100) // 绘制完成后将画布更新到视图 context.draw() ``` 其中,progress 表示进度百分比,可以通过修改该变量来实现圆环进度的动态更新。 以上就是微信小程序圆环的实现方法,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值