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

我已经能够使用背景图像源绘制图像，并且像这样将背景图像的不透明度更改为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％，以便最终的画布如下所示：



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

最佳答案

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

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

关于javascript - 如何使用 Canvas 更改上下文弧的不透明度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9503355/