Округлые края на изображении

Question

Скажем, я создал изображение в форме многоугольника, создав форму в холсте 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>

Answer 1

Просто измените порядок, в который вы рисуете, а затем измените 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>

Answer 2

Там нет автоматического способа сделать это. API-интерфейс canvas довольно низкоуровневый, поэтому он не знает, что вы нарисовали фигуру и хотите определить, где все ребра. Что вы можете сделать, но было бы немного хлопот, это использовать bezierCurveTo. Этот метод принимает аргументы размера и может создавать кривые. Объедините это с вашими линиями, и вы можете создавать закругленные углы.

bezierCurveTo

Вы также могли бы добавить круги на всех углах, с помощью метода arc.