Javascript 仅将canvas composite应用于两个操作

我需要画一个不透明度的比萨饼，使它看起来“空”，并逐步填补比萨饼与全彩图像在顺时针方向使用画布

我一开始画的是“空”比萨饼，用的是同一张图片，上面的globalAlpha小于1

然后我在上面画了一个“满的”比萨饼

最后，我逐步绘制了一个圆弧作为比萨饼的遮罩，并在其上应用了一个复合操作，

“destination top”

。这有效地掩盖了披萨，就像我想要的那样，但是也掩盖了第一个披萨，即“空”披萨的不利后果。我只想把我画的第二个比萨饼藏起来

所以基本上，我只需要在两个操作之间进行合成，而不是在之前绘制的所有操作和之后绘制的所有操作之间进行合成。这是我的密码：

var ratio = 0;
var image = new Image();
image.src = "http://www.pizza.la-recette.net/img/pizza-001.jpg";
image.onload = function() {
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    setInterval(function() {
        ratio += 0.01;
        ratio = ratio % 1;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        //Draw "empty" pizza image
        ctx.globalAlpha = 0.6;
        ctx.drawImage(image, 0, 0);

        //Draw actual pizza image
        ctx.globalAlpha = 1;
        ctx.drawImage(image, 0, 0);

        //Draw mask
        ctx.globalCompositeOperation = "destination-atop";
        ctx.beginPath();
        ctx.moveTo(image.width / 2, image.height / 2);
        ctx.arc(image.width / 2, image.height / 2, image.width / 2, -Math.PI / 2, (-Math.PI / 2) + ((Math.PI * 2) * ratio), false);
        ctx.fill();
    }, 100);
};​

---

如何才能做到这一点？

在绘制实际的比萨饼图像之前，您可以创建一个剪裁区域，而不是绘制遮罩。代码几乎相同，您基本上用

ctx.clip（）

替换对

ctx.fill（）

的调用，并向下移动第二个

drawImage

。您还需要

保存

/

恢复

上下文状态，以便每次重置剪辑区域

var ratio = 0;
var image = new Image();
image.src = "http://www.pizza.la-recette.net/img/pizza-001.jpg";
image.onload = function() {
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    setInterval(function() {
        ratio += 0.01;
        ratio = ratio % 1;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        //Draw "empty" pizza image
        ctx.globalAlpha = 0.6;
        ctx.drawImage(image, 0, 0);

        ctx.save();

        //Set the clipping region
        ctx.beginPath();
        ctx.moveTo(image.width / 2, image.height / 2);
        ctx.arc(image.width / 2, image.height / 2, image.width / 2, -Math.PI / 2, (-Math.PI / 2) + ((Math.PI * 2) * ratio), false);
        ctx.clip();

        //Draw actual pizza image
        ctx.globalAlpha = 1;
        ctx.drawImage(image, 0, 0);     

        ctx.restore();
    }, 100);
};

---

啊哈！所以在那之后画的所有东西只有在这个剪辑区域内才会显示出来？