使用多个显示对象进行oCanvas遮罩

Question

我正在使用oCanvas创建遮罩图像的三角形，每个三角形遮罩一个不同的图像。我面临的问题是，当我遮罩这些三角形时，它们隐藏了它外面的任何东西，所以最后一个三角形遮蔽了下面的三角形。有什么方法可以避免在其他地方显示透明度吗？我想它的作用与globalCompositeOperation中的"xor“相反。

下面是我的代码：

    var canvas = oCanvas.create({
        canvas: "#canvas",
        background: "#0cc"
    });

    var center = canvas.display.ellipse({
        x: canvas.width / 2, y: canvas.height / 2,
        radius: canvas.width / 3,
        fill: "#fff"
    }).add();

    var radius = canvas.width / 3;
    var x = canvas.width / 2;
    var y = canvas.height / 2;

    var image = canvas.display.image({
        x: 0,
        y: 0,
        origin: { x: "center", y: "top" },
        image: img,
        rotation: 120
    });

    center.addChild(image);

    var triangle = canvas.display.polygon({
        x: -canvas.width / 3,
        y: -canvas.width / 6,
        sides: 3,
        radius: 70,
        fill: "#0aa",
        rotation: 30,
        composition:"destination-atop"
    });

    center.addChild(triangle);

    var image1 = canvas.display.image({
        x: 0,
        y: 0,
        origin: { x: "center", y: "top" },
        image: img,
        rotation: 180
    });

    image1.scale(-1, 1);

    center.addChild(image1);

    var triangle1 = canvas.display.polygon({
        x: 0,
        y: -canvas.width / 3,
        sides: 3,
        radius: 70,
        fill: "#aaa",
        rotation: 90,
        composition:"destination-atop"
    });

    center.addChild(triangle1);

如果我不使用组合，但当我使用组合时，我的所有三角形和图像都可以正确显示：“destination- to”做我想做的事情，但它隐藏了三角形之外的任何东西。

谢谢你的帮助！

Answer 1

首先我必须承认，当我制作oCanvas时，我并没有在组合上投入太多的精力。它没有经过很好的测试，也许可以用一种更好的方式来完成。

composition属性在oCanvas中的作用是，它只在本地canvas API中设置globalCompositeOperation属性，同时绘制所有对象(https://github.com/koggdal/ocanvas/blob/develop/src/draw.js#L161)。

你所说的效果是如果我对“目的地-顶部”的理解正确的话。在https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Compositing中，该值表示“现有画布仅保留在与新形状重叠的位置。新形状绘制在画布内容的后面。”

你想要的效果是什么？你想让图片作为三角形的背景吗？然后，您可以将fill属性设置为图像：http://ocanvas.org/docs/Display-Objects/Base#property-fill