Question

我正在使用oCanvas创建遮罩图像的三角形，每个三角形遮住不同的图像。我面临的问题是，当我屏蔽这些三角形时，它们会隐藏它外面的任何内容，因此最后一个三角形会掩盖下面的三角形。有没有办法避免在别处显示透明度？我想它与“xor”在globalCompositeOperation中做的相反。

这是我的代码：

    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-atop”会执行我想要做的事情，但它会隐藏三角形之外的任何内容。

感谢您的帮助！

Answer 1

我必须首先承认，当我制作oCanvas时，我没有为构图付出过多的努力。它没有经过良好测试，可能会以更好的方式完成。

组合属性在oCanvas中的作用是它只是在绘制所有对象（https://github.com/koggdal/ocanvas/blob/develop/src/draw.js#L161）时在本机画布API中设置globalCompositeOperation属性。

您正在谈论的效果是，如果我理解它对“destination-atop”是正确的。从https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Compositing开始，值表示“现有画布仅保留在与新形状重叠的位置。新形状将在画布内容后面绘制。”。

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

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

1 个答案: