返回

微信小程序canvas绘制圆角矩形的技巧

前端

微信小程序canvas绘制圆角矩形

在微信小程序中，canvas提供了丰富的绘图API，可以轻松实现各种图形的绘制。圆角矩形是常见的图形之一，在界面设计中经常用到。绘制圆角矩形有很多种方法，下面介绍两种最常用的方法。

方法一：使用四个圆角矩形和四条直线

这种方法是将圆角矩形分成四个圆角矩形和四条直线，然后再分别绘制。具体步骤如下：

  1. 绘制四个圆角矩形，分别位于圆角矩形的四个角上。
  2. 绘制四条直线，分别连接四个圆角矩形的两端。
  3. 将四个圆角矩形和四条直线填充颜色，就得到了一个完整的圆角矩形。
const ctx = wx.createCanvasContext('canvas-id');

// 绘制四个圆角矩形
ctx.setFillStyle('#ff0000');
ctx.fillRect(0, 0, 100, 100);
ctx.fillRect(100, 0, 100, 100);
ctx.fillRect(0, 100, 100, 100);
ctx.fillRect(100, 100, 100, 100);

// 绘制四条直线
ctx.setStrokeStyle('#0000ff');
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(100, 50);
ctx.lineTo(100, 100);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50, 0);
ctx.lineTo(50, 100);
ctx.lineTo(100, 100);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 100);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(150, 0);
ctx.lineTo(150, 100);
ctx.lineTo(200, 100);
ctx.stroke();

// 填充颜色
ctx.draw();

方法二：使用两个矩形和两个圆

这种方法是将圆角矩形分成两个矩形和两个圆，然后再分别绘制。具体步骤如下：

  1. 绘制两个矩形，分别位于圆角矩形的中间和两端。
  2. 绘制两个圆，分别位于圆角矩形的四个角上。
  3. 将两个矩形和两个圆填充颜色，就得到了一个完整的圆角矩形。
const ctx = wx.createCanvasContext('canvas-id');

// 绘制两个矩形
ctx.setFillStyle('#ff0000');
ctx.fillRect(25, 25, 150, 50);
ctx.fillRect(25, 75, 150, 50);

// 绘制两个圆
ctx.setFillStyle('#0000ff');
ctx.beginPath();
ctx.arc(25, 25, 25, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(175, 25, 25, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(25, 175, 25, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(175, 175, 25, 0, 2 * Math.PI);
ctx.fill();

// 填充颜色
ctx.draw();

以上就是两种绘制圆角矩形的方法，开发者可以根据自己的需要选择合适的方法。