使用图像地图或画布遮罩图像？

Question

好的，我的问题在视觉上有更好的解释：

我需要让这5张图片易于更换，而客户不必手动从图像中剪切角度等等。所以我用这种方式描绘：

我为蓝色条纹和蓝色空间创建了PNG蒙版。但是图像仍然在底部重叠，因为它们都是方形的（参见最后一张图片）。有没有办法，使用图像地图（甚至是javascript）在页面加载时剪切/遮盖正方形图像中的碎片？

谢谢，

克里斯

Answer 1

我认为你最好的选择就是使用画布，除非我忘了用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