canvas-图片圆角问题

42次阅读

共计 668 个字符，预计需要花费 2 分钟才能阅读完成。

近期的工作中，是继 canvas 设置边框问题之后碰到的第 4 个问题。

Origin
My GitHub

如果只是想要显示圆角的成果，设置 border-radius 就能够了，但如果要让 canvas 合成的图片显示为圆角，这种 css 形式不行。这是示例，扫描拜访二维码如下。

在网上查问材料，发现同样的问题，解决的形式是用 canvas 的裁剪性能。

先画布上画一个有圆角的矩形，而后应用裁剪的形式 clip()。

// 生成有圆角的矩形
function drawRoundedRect(cxt, x, y, width, height, radius) {cxt.beginPath();
  cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
  cxt.lineTo(width - radius + x, y);
  cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
  cxt.lineTo(width + x, height + y - radius);
  cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
  cxt.lineTo(radius + x, height + y);
  cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
  cxt.closePath();}

这是示例，扫描拜访二维码如下。