如何使用画布来改变上下文弧的不透明度？

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），逆时针设置为真。我希望这两个弧的不透明度为25％，而剩下的馅饼外壳的不透明度为0％，因此生成的画布看起来像这样：

如何使用画布来达到这种效果？

Answer 1

您需要使用饼形clipping paths来绘制图像，如下所示：

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