javascript - 使用图像映射或 Canvas 遮盖图像？

Question

好吧，我的问题在视觉上得到了更好的解释:

我需要使这 5 张图像易于替换，而无需客户手动从图像中切出 Angular 等。所以我是这样想象的:

我为上面的蓝色条和蓝色空间创建了 PNG 蒙版。但是图像仍然在底部重叠，因为它们都是正方形的(请参见最后一张图像的示例)。有什么方法可以在页面加载时使用图像映射(甚至 javascript)从方形图像中剪切/ mask 部分？

谢谢，

克里斯

Answer 1

我认为你最好的选择是使用 Canvas ，除非我忘记了 css3 的东西

<canvas id="image1" width="___" height="____">
</canvas>

var people = [___];
var canvas = document.getElementById("image1");
var context = canvas.getContext("2d");
context.drawImage(people[0], x, y, width, height);
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y1);
context.arcTo(x, y);
context.clip();
context.closePath();

我可能搞砸了，但我会做这样的事情

           (x, y)\__
          /         \__
         /             \__
(x2, y1)(_________________\(x1, y1)

我用 ascii 绘制最左边的披萨片的最佳方法是什么

这样做需要多个 Canvas 元素。其中每个代表一片。原因是因为裁剪会清除路径中的所有内容。

资源:

• MDN:clipping