微信小程序使用canvas绘制圆角矩形在Android：变形、锯齿

最新推荐文章于 2023-01-05 14:09:51 发布

小白阿斯兰

最新推荐文章于 2023-01-05 14:09:51 发布

阅读量1.3k

点赞数

分类专栏：工作随笔文章标签： canvas 小程序海报

本文链接：https://blog.csdn.net/qq_39343308/article/details/90669390

版权

工作随笔专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这两天用小程序实现分享生成海报，那我的手机测的一直没问题，结果后来用同事的小米测发现：画的图形缺个角，锯齿形的，根据小程序社区回复：使用ctx.arc + ctx.lineTo就能避免Android错误，Android只使用ctx.arcTo不兼容！！！

/**
 * 绘制圆角矩形
 * @param {Object} ctx - canvas组件的绘图上下文
 * @param {Number} x - 矩形的x坐标
 * @param {Number} y - 矩形的y坐标
 * @param {Number} w - 矩形的宽度
 * @param {Number} h - 矩形的高度
 * @param {Number} r - 矩形的圆角半径
 * @param {String} [c = 'transparent'] - 矩形的填充色
 */
  roundRect: function(ctx, x, y, w, h, r, c = '#fff') {
    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();
  },