在微信小程序使用canvas繪制圓角矩形時(shí)，在Android出現(xiàn)變形、鋸齒現(xiàn)象，而iOS正常。
根據(jù)小程序社區(qū)回復(fù)：使用ctx.arc + ctx.lineTo就能避免Android錯(cuò)誤，Android只使用ctx.arcTo不兼容?。?！
解決方案：

/**
 * 繪制圓角矩形
 * @param {Object} ctx - canvas組件的繪圖上下文
 * @param {Number} x - 矩形的x坐標(biāo)
 * @param {Number} y - 矩形的y坐標(biāo)
 * @param {Number} w - 矩形的寬度
 * @param {Number} h - 矩形的高度
 * @param {Number} r - 矩形的圓角半徑
 * @param {String} [c = 'transparent'] - 矩形的填充色
 */
const roundRect = (ctx, x, y, w, h, r, c = 'transparent') => {
  if (w < 2 * r) { r = w / 2; }
  if (h < 2 * r) { r = h / 2; }

  ctx.beginPath();
  ctx.fillStyle = c;

  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
  ctx.moveTo(x + r, 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);
  ctx.lineTo(x + w, y + h - r);
  ctx.lineTo(x + w - r, y + h);

  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
  ctx.lineTo(x + r, y + h);
  ctx.lineTo(x, y + h - r);

  ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
  ctx.lineTo(x, y + r);
  ctx.lineTo(x + r, y);

  ctx.fill();
  ctx.closePath();
};