4

我需要绘制一个不透明的比萨饼，使其看起来“空”，并使用画布以顺时针方式逐渐用全彩色图像填充比萨饼。

我从绘制“空”披萨开始，使用相同的图像，但globalAlpha低于 1。

然后我在它上面画了一个“完整的”披萨。

最后，我逐渐绘制了一个弧作为披萨的蒙版，并对其应用了复合操作，"destination-atop". 这有效地掩盖了我想要的披萨，但也掩盖了第一个披萨，即“空”披萨的不利后果。我只想让它隐藏我正在画的第二个披萨。

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

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);
};​

jsFiddle

我怎样才能做到这一点？

4

1 回答 1

3

您可以在绘制实际的比萨图像之前创建一个剪辑区域，而不是绘制蒙版。代码几乎相同，您基本上将调用替换为ctx.fill()并将ctx.clip()第二个drawImage向下移动。您还需要save/restore上下文状态以每次重置剪辑区域。

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);
};
于 2012-05-25T18:32:26.050 回答