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

Question

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

我有1件图像衬衫，1张图像布。我把衬衫画到画布上。现在，我想用图像布来换衬衫。但我不知道该怎么做。

示例：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。

您可以将其包装在每次需要重新绘制布料时调用的函数中。