Javascript 如何使用画布更改上下文的不透明度'；s弧？

我已经能够使用背景图像源绘制图像，并将背景图像的不透明度更改为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_-castle.png）

我想让用户指定两组开始和结束角度。假设第一组是（30,60），第二组是（135,180），逆时针方向设置为true。我希望这两个圆弧的不透明度为25%，剩余的饼图外壳的不透明度为0%，这样生成的画布将如下所示：

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

---

如何使用画布实现此效果？

您只需使用饼图形式绘制图像，如下所示：

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

---

你能举一个加载图像的例子吗？我理解绘制圆弧的概念，但我无法使用像

context.drawImage（img，0，0）这样的背景图像获得正确的语法我提供了一个到文章的链接，其中有一个例子。我看了这篇文章。但是，我需要将饼图外壳的两个圆弧的不透明度更改为25%，将剩余圆弧的不透明度更改为0%。这个例子仅仅是将一个正方形的外部剪裁成一个圆形，这与我需要帮助的内容无关。这个例子没有包括一个源图像，这也是我一直在努力解决的一个问题。用不透明度0%绘制某个东西与根本不绘制它是一样的。示例演示了剪裁技术。它可以用于任何剪切路径（形状）：正方形、圆形、圆弧。。。在那个示例中，您需要图像做什么？你们知道如何在画布上画它们，答案中的代码做得很好。