0

我正在使用 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-atop”做了我想做的事情，但它隐藏了三角形之外的任何东西。

谢谢你的帮助！

4

1 回答 1

0

我必须首先承认，我在制作 oCanvas 时并没有在构图中投入太多精力。它没有经过很好的测试，可能会以更好的方式完成。

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

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

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

于 2013-04-25T07:36:28.440 回答