微信小程序利用canvas绘制根据文字调整大小的边框

阅读量：

1.需求

生成海需要绘制一个具有边框且内部为空的标签，具体示例如下图所示。众所周知，在微信小程序中，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)
    
  
    
     // 绘制borde

全部评论 (0)

还没有任何评论哟~