详解微信小程序canvas圆角矩形的绘制的方法

前言

canvas是HTML5新增的一个组件，它可以让我们直接在浏览器中绘制出图形、文字和图片等元素。在微信小程序中，我们也可以使用canvas来进行绘制，从而实现一些炫酷的效果。

本篇攻略将详细讲解如何在微信小程序中使用canvas绘制圆角矩形。

步骤

步骤一：创建canvas

我们需要在wxml模板文件中创建一个canvas组件，用来绘制圆角矩形。代码如下：

<canvas canvas-id="myCanvas" style="width:100%;height:100vh;"></canvas>

步骤二：获取canvas上下文

我们需要使用wx.createCanvasContext方法来获取canvas上下文，通过该对象，我们可以调用canvas的API来进行绘制。

const ctx = wx.createCanvasContext('myCanvas');

步骤三：绘制圆角矩形

绘制圆角矩形需要用到canvas的arcTo方法，具体实现步骤如下：

1. 移动画笔到圆角矩形的左上角，使用ctx.moveTo方法。
2. 绘制圆角矩形的上边线，使用ctx.lineTo方法。
3. 绘制圆角矩形的右上角弧线，使用ctx.arcTo方法。
4. 绘制圆角矩形的右边线，使用ctx.lineTo方法。
5. 绘制圆角矩形的右下角弧线，使用ctx.arcTo方法。
6. 绘制圆角矩形的下边线，使用ctx.lineTo方法。
7. 绘制圆角矩形的左下角弧线，使用ctx.arcTo方法。
8. 绘制圆角矩形的左边线，使用ctx.lineTo方法。
9. 使用ctx.closePath方法，将路径闭合起来。
10. 使用ctx.stroke或ctx.fill方法，绘制矩形的描边或填充。

具体代码实现如下：

ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.arcTo(x + w, y, x + w, y + r, r);
ctx.lineTo(x + w, y + h - r);
ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
ctx.lineTo(x + r, y + h);
ctx.arcTo(x, y + h, x, y + h - r, r);
ctx.lineTo(x, y + r);
ctx.arcTo(x, y, x + r, y, r);
ctx.closePath();
ctx.stroke();

步骤四：完整代码

最终的完整代码如下：

Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('myCanvas');
    const x = 50, y = 50, w = 200, h = 100, r = 20;
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.arcTo(x + w, y, x + w, y + r, r);
    ctx.lineTo(x + w, y + h - r);
    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
    ctx.lineTo(x + r, y + h);
    ctx.arcTo(x, y + h, x, y + h - r, r);
    ctx.lineTo(x, y + r);
    ctx.arcTo(x, y, x + r, y, r);
    ctx.closePath();
    ctx.stroke();
    ctx.draw();
  }
})

示例

下面提供两个使用圆角矩形的示例：

示例一：实现圆角图片

Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('myCanvas');
    const x = 50, y = 50, w = 200, h = 200, r = 50;
    ctx.beginPath();
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    ctx.lineTo(x + w - r, y);
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    ctx.lineTo(x + w, y + h - r);
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
    ctx.lineTo(x + r, y + h);
    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage('image.png', x, y, w, h);
    ctx.draw();
  }
})

该示例使用圆角矩形将图片裁剪成圆角的形状。

示例二：实现圆角矩形按钮

Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('myCanvas');
    const x = 50, y = 50, w = 200, h = 50, r = 25;
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.arcTo(x + w, y, x + w, y + r, r);
    ctx.lineTo(x + w, y + h - r);
    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
    ctx.lineTo(x + r, y + h);
    ctx.arcTo(x, y + h, x, y + h - r, r);
    ctx.lineTo(x, y + r);
    ctx.arcTo(x, y, x + r, y, r);
    ctx.closePath();
    ctx.fillStyle = '#ff0000';
    ctx.fill();
    ctx.draw();
  }
})

该示例使用圆角矩形绘制一个红色的按钮。