使用画布更改对象形状的背景

Question

我想实现一个服装设计网站，但我遇到了一个问题。

我有一件形象衬衫，一件形象布。我把衬衫画在帆布上。现在，我想换一件的布衬衫。但我不知道该怎么做。

示例：http://sbhvietnam.vn/shirt-by-hand.html

Answer 1

您可以使用复合模式来实现这一点。如果加载了图像，并且图像后面的背景是透明的，并且设置了画布和上下文(此处为ctx)，则可以这样做：

/// clear if you reuse this method to avoid pixelated outline
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

/// draw shirt shape
ctx.drawImage(imgShirt, 0, 0);

/// change composite mode for next draw
ctx.globalCompositeOperation = 'source-atop';  /// source-in is an option

/// draw cloth image on top and it will take the shape of the shirt image.
ctx.drawImage(imgCloth, 0, 0);

/// reset composite mode to default mode
ctx.globalCompositeOperation = 'source-over';

注意，如果您应该选择使用source-in而不是source-atop，那么每次您想要在其上更改图像时，都必须重新绘制imgShirt。

每次你需要重新绘制布料时，你都可以用你调用的函数把它包装起来。