图像上的圆形边缘

说我创建了一个多边形形状的图像，方法是在HTML5画布中创建一个形状，然后用图像填充它，如下图所示：图像上的圆形边缘

现在我要圆这个六边形的角落。

有一个lineJoin = "round"财产可用，但这似乎并没有工作（我相信，因为形状是充满的，没有外线轮）。

有没有人有任何想法如何用HTML5画布或任何其他方式做到这一点？

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

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(); 
 
};

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

来源

2016-02-24 Emile Paffard-Wray

画你的线条，创造六角短一点，让他们结束每个角落点之前的一点，然后绘制[圆弧]（HTTPS ：//developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc）创建圆角。（可能需要进行一些计算才能获得正确的位置和角度。）//也许使用CSS剪辑路径或SVG掩码可以使这更容易。 https://css-tricks.com/clipping-masking-css/ – CBroe

只是好奇。 :-)为什么使用模式而不是'context.drawImage'？ – markE

@markE我刚开始使用的第一件事情是，首先完成工作，但您可能正确使用'''context.drawImage'''; http://jsperf.com/drawimage-vs-canvaspattern/16。不知道我对画布有足够的了解，以作出明智的决定。 –

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

我做了一些调整，因为一些在你的代码的边角都拿到截掉，但没有调整图像的位置（我希望这是很容易做到）

预览

你需要的方式来调整图像位置就像我说的

片段

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); 
 
    
 
};

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

来源

2016-02-24 10:38:26 potatopeelings

伟大的解决方案，谢谢！ –

不用担心！我忘了提及我还添加了一个'ctx.stroke（）' – potatopeelings

有这样做的没有自动的方式。画布API是相当低级的，所以它不知道你画了一个形状，并且想要检测所有边缘在哪里。你可以做什么，但这会有点麻烦，就是使用bezierCurveTo。此方法需要大小参数并可以创建曲线。结合你的线条，你可以创建圆角。

bezierCurveTo

你也可以在任何角落的社交圈，与arc方法。

来源

2016-02-24 10:25:06 GMchris

图像上的圆形边缘

回答

相关问题