Javascript 图像上的圆形边缘

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

现在我想把这个六边形的角弄圆

有一个可用的

lineJoin=“round”

属性，但这似乎不起作用（我认为是因为形状已填充，没有外部线条可供圆化）

有人知道如何使用HTML5画布或其他方式来实现这一点吗

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

var ctx=document.getElementById（'myCanvas'）.getContext（'2d'）；
var a=ctx.canvas.width，r=a/5；
var侧=数学sqrt（（4/3）*r*r）；
//在画布上绘制你的图像（这里我只填充
//红色表面
var img=新图像（）；
img.src=”https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg";
img.onload=函数（）{
var pattern=ctx.createPattern（img，“无重复”）；
ctx.fillStyle=图案；
ctx.fillRect（0，0，a，a）；
//切换混合模式
ctx.globalCompositeOperation='destination in'；
//绘制六边形以遮罩图像
ctx.beginPath（）；
ctx.移动到（0，侧/2）；
ctx.lineTo（0，3*侧/2）；
ctx.lineTo（右侧，2*侧）；
ctx.lineTo（2*r，3*side/2）；
ctx.lineTo（2*r，侧面/2）；
ctx.lineTo（r，0）；
ctx.closePath（）；
ctx.fill（）；
}；

---

没有自动执行此操作的方法。canvas API的级别非常低，因此它不知道您已经绘制了一个形状，并且希望检测所有边的位置。您可以做的是，但是使用

bezierCurveTo

会有点麻烦。此方法需要大小参数并可以创建曲线。将其与y结合使用我们的线条，您可以创建圆角

---

您还可以使用

圆弧

方法在所有角点添加圆。

只需更改绘制顺序，然后将

全局复合操作

更改为

'source-in'

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

---

预览

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

---

片段

var ctx=document.getElementById（'myCanvas'）.getContext（'2d'）；
var a=ctx.canvas.width，r=a/5；
var侧=数学sqrt（（4/3）*r*r）-20；
//在画布上绘制你的图像（这里我只填充
//红色表面
var img=新图像（）；
img.src=”https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg";
img.onload=函数（）{
ctx.lineJoin=“圆形”；
ctx.lineWidth=50；
//绘制六边形以遮罩图像
ctx.beginPath（）；
ctx.移动至（50，50+侧/2）；
ctx.lineTo（50，50+3*侧/2）；
ctx.lineTo（50+r，50+2*侧）；
ctx.lineTo（50+2*r，50+3*side/2）；
ctx.lineTo（50+2*r，50+侧/2）；
ctx.lineTo（50+r，50）；
ctx.closePath（）；
ctx.stroke（）；
ctx.fill（）；
//切换混合模式
ctx.globalCompositeOperation='source in'；
var pattern=ctx.createPattern（img，“无重复”）；
ctx.fillStyle=图案；
ctx.fillRect（0，0，a，a）；
}；

---

将创建六边形的线稍微缩短一点，使它们在每个角点之前结束一点，然后绘制一条线来创建圆角。（可能需要一些计算来获得正确的位置和角度。）//可能使用CSS剪辑路径或SVG掩码会使这更容易。只是好奇而已。：-）为什么要使用模式而不是

context.drawImage

？@markE我刚开始只是用我遇到的第一件事来完成这项工作，但使用

context.drawImage

；；你可能是对的。我不确定我对画布的了解是否足以做出明智的决定。别担心！我忘了提到我还添加了

ctx.stroke（）