小程序 canvas注意事项（6）添加圆角、截取区域

生成圆角的流程就是，先画出一片圆角区域，之后剪切保存下来，再画想要生成圆角的内容，内容会自动生成到先前到圆角区域中，超出到部分不显示就呈现出圆角状态，注意，画圆角之前之后都要进行保存与还原操作，下面是我写的一个简单到函数例子：

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

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

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

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

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

    // 绘制右下角圆弧
    self.data.ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

    // 绘制border-bottom
    self.data.ctx.lineTo(x + r, y + h)
    // self.data.ctx.lineTo(x, y + h - r)

    // 绘制左下角圆弧
    self.data.ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

    // 绘制border-left
    self.data.ctx.lineTo(x, y + r)
    // self.data.ctx.lineTo(x + r, y)

    if (fillColor) {
      // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
      self.data.ctx.setFillStyle(fillColor)
      // 对绘画区域填充
      self.data.ctx.fill()
    }

    if (strokeColor) {
      // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
      self.data.ctx.setStrokeStyle(strokeColor)
      // 画出当前路径的边框
      self.data.ctx.stroke()
    }
    // 关闭一个路径
    // self.data.ctx.closePath()

    // 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore
    self.data.ctx.clip()
  },