圖像上的圓形邊緣

說我創建了一個多邊形形狀的圖像，方法是在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

圖像上的圓形邊緣

回答

相關問題