微信小程序利用canvas画出根据文字自适应的边框

原创

已于 2023-06-28 18:01:35 修改 · 6.7k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#html

于 2019-07-16 16:44:18 首次发布

本文介绍如何在微信小程序中使用canvas画出基于文字自适应的中空边框标签。通过计算文字宽度和设置固定高度，实现了圆角边框与文字填充。代码示例展示了调用方法和调整文字位置的过程。

1.需求

生成海需要画出一个中空带边框的的tag，如下图。众所周知，微信小程序里的canvas画图都是需要自己一点点画出来，不像html有htmlToCanvas，直接写HTML就可以转成canvas.

2.实现

参考链接

首先要实现圆角边框，再把字体填充进去，我在网上找到一个方法，直接拿过来改了一下，代码如下：

//画圆角边框
  roundRect(ctx, x, y, w, h, r, fillColor, strokeColor) {
    // 画圆角 ctx、x起点、y起点、w宽度、y高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
    // 开始绘制
    ctx.beginPath()

    // 绘制左上角圆弧 Math.PI = 180度
    // 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

    // 绘制border-top
    // 移动起点位置 x终点、y终点
    ctx.moveTo(x + r, y)
    // 画一条线 x终点、y终点
    ctx.lineTo(x + w - r, y)
    // ctx.lineTo(x + w, y + r)

    // 绘制右上角圆弧
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

    // 绘制border-right
    ctx.lineTo(x + w, y + h - r)
    // ctx.lineTo(x + w - r, y + h)

    // 绘制右下角圆弧
    ctx.arc(x + w - r, y + h