javascript - 如何使用 Canvas 更改上下文弧的不透明度？

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)。

我希望用户指定两组开始和结束 Angular 。假设第一组是 (30, 60)，第二组是 (135, 180)，并且逆时针设置为 true。我希望这两个弧线的不透明度为 25%，剩下的饼皮的不透明度为 0%，这样生成的 Canvas 将如下所示:

如何使用canvas来实现这种效果？

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();