Как использовать холст, чтобы изменить непрозрачность дуги контекста?

Question

Мне удалось нарисовать изображения с использованием источника фонового изображения и изменить непрозрачность фонового изображения до 25%, например, так ...

var context = document.getElementById('myCanvas').getContext('2d');
context.globalAlpha=.25;                

var img = new Image();
img.onload = function(){
    context.drawImage(img, 0, 0);             
}                           
img.src = 'pie_crust.png';           

И я смог нарисовать одиндуги ...

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;
var startingAngle = 30 * Math.PI/180;
var endingAngle = 60 * Math.PI/180;
var counterclockwise = true;

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.lineWidth = 20;
context.strokeStyle = "black"; // line color
context.stroke(); 

Однако я не смог изменить непрозрачность дуги контекста.Например, у меня есть круговая корка (pie_crust.png).

Я бы хотел, чтобы пользователь указал два набора начального и конечного углов.Допустим, первый набор равен (30, 60), а второй - (135, 180), а против часовой стрелки установлено значение true.Я хотел бы, чтобы эти две дуги имели непрозрачность 25%, а оставшаяся корка пирога должна иметь непрозрачность 0%, чтобы результирующий холст выглядел следующим образом:* Как я могу использовать холст для достижения этого эффекта?

Answer 1

Вам нужно просто нарисовать изображение, используя круговые обтравочные контуры , например:

context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/6, Math.PI/3, true);
context.moveTo(centerX, centerY);
context.closePath();
context.clip();