o带有多个显示对象的画布遮罩答案

【问题标题】：oCanvas masking with several display objectso带有多个显示对象的画布遮罩
【发布时间】：2013-04-25 15:36:28
【问题描述】：

我正在使用 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”会做我想做的事情，但它会隐藏三角形之外的所有内容。

感谢您的帮助！

【问题讨论】：

标签： canvas html5-canvas masking

【解决方案1】：

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

composition 属性在 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

【讨论】：