图像上的圆角

Question

假设我创建了一个多边形的图像，方法是在HTML5画布中创建一个形状，然后用图像填充它，例如如下：

现在我想围绕这个六边形的角落。

有一个lineJoin = "round"属性，但这似乎不起作用（我相信因为形状已经填满，并且没有外线可以圆化）。

有没有人知道如何使用HTML5 canvas或任何其他方法执行此操作？

以下是用于创建图像的代码：

＆＃13;

＆＃13;

var ctx = document.getElementById('myCanvas').getContext('2d');
var a = ctx.canvas.width, r = a / 5;

var side = Math.sqrt((4/3) * r * r);


// Draw your image onto the canvas (here I'll just fill the
// surface with red
var img = new Image();
img.src = "https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg";

img.onload = function () {
    var pattern = ctx.createPattern(img, "no-repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, a, a);
  
  // Switch the blending mode
  ctx.globalCompositeOperation = 'destination-in';

  // Draw the hexagon shape to mask the image
  ctx.beginPath();
  ctx.moveTo(0, side/2);
  ctx.lineTo(0, 3*side/2);
  ctx.lineTo(r, 2*side);
  ctx.lineTo(2*r, 3*side/2);
  ctx.lineTo(2*r, side/2);
  ctx.lineTo(r, 0);
  ctx.closePath();
  ctx.fill();
};

＆＃13;

<canvas width="1000" height="1000" id="myCanvas"></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需更改您绘制的顺序，然后将globalCompositeOperation更改为'source-in'。

我做了一些调整，因为代码中的某些角落被剪掉但没有调整图像位置（我希望这很容易）

预览

您需要像我说的那样调整图像位置

<强>段

＆＃13;

＆＃13;

var ctx = document.getElementById('myCanvas').getContext('2d');
var a = ctx.canvas.width, r = a / 5;

var side = Math.sqrt((4/3) * r * r) - 20;


// Draw your image onto the canvas (here I'll just fill the
// surface with red
var img = new Image();
img.src = "https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg";

img.onload = function () {
  
  ctx.lineJoin = "round";
  ctx.lineWidth = 50;

  // Draw the hexagon shape to mask the image
  ctx.beginPath();
  ctx.moveTo(50, 50 + side/2);
  ctx.lineTo(50, 50 + 3*side/2);
  ctx.lineTo(50 + r, 50 + 2*side);
  ctx.lineTo(50 + 2*r, 50 + 3*side/2);
  ctx.lineTo(50 + 2*r, 50 + side/2);
  ctx.lineTo(50 + r, 50);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();
  
  // Switch the blending mode
  ctx.globalCompositeOperation = 'source-in';
  var pattern = ctx.createPattern(img, "no-repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, a, a);
  
};

＆＃13;

<canvas width="1000" height="1000" id="myCanvas"></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 2

没有自动执行此操作的方法。画布API非常低级，因此它不知道您绘制了一个形状并想要检测所有边缘的位置。您可以做什么，但使用bezierCurveTo会有点麻烦。此方法采用大小参数并可以创建曲线。将它与您的线条相结合，您就可以创建圆角。

bezierCurveTo

您还可以使用arc方法在所有角落添加圆圈。