使用javascript将不同的纹理应用于重叠的画布

Question

我需要实现一种方法，将不同的纹理应用于非常复杂的嵌套画布。例如考虑这个图像：

Car

我想让用户为门选择一种布料，为身体的其他部分选择另一种布料，例如刻度，旋转角度和透明度。

是否有可以提供帮助的js库或纯JavaScript（可能是HTML5）就足够了？

非常感谢。

Answer 1

是的，您可以仅使用原生html5画布对您的汽车进行纹理化。

没有必要的库，因为你的任务很简单，而且canvas有内置的方法来处理你想要做的所有事情。

首先为汽车的每个部分创建一个图像。您希望应用纹理的每个部分图像都是不透明的，而在您不希望应用纹理的地方，它们是透明的。

要将纹理应用于任何部件，请首先在第二个内存中的画布上绘制该部件。然后在第二个画布上绘制纹理。您可以使用source-atop合成模式将纹理约束为仅填充所需的部分。

你可以扩展＆amp;使用context.scale＆amp;旋转纹理context.rotate。

您可以使用context.globalAlpha来控制纹理的透明度。

当您根据需要对部件进行纹理处理时，只需将内存（部分）画布绘制到主画布上即可。

以下是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var c=document.createElement('canvas');
var cctx=c.getContext('2d');
var cw,ch;

var car=new Image();
car.onload=start;
car.src='https://dl.dropboxusercontent.com/u/139992952/carForTexturing.png';
var door=new Image();
door.onload=start;
door.src='https://dl.dropboxusercontent.com/u/139992952/doorForTexturing.png';
var texture1=new Image();
texture1.onload=start;
texture1.src='https://dl.dropboxusercontent.com/u/139992952/texture1.png';
var imgCount=3;
function start(){
  if(--imgCount>0){return;}

  cw=canvas.width=c.width=car.width;
  ch=canvas.height=c.height=car.height;

  ctx.drawImage(car,0,0);

  texturize(door, texture1, 0.50, Math.PI/4, 0.30);

  ctx.drawImage(c,0,0);
}

function texturize(carpartImage,texture,scale,rotation,opacity){
  cctx.clearRect(0,0,cw,ch);
  cctx.drawImage(carpartImage,0,0);
  cctx.save();
  cctx.translate(cw/2,ch/2);
  cctx.rotate(rotation);
  cctx.globalAlpha=opacity;
  cctx.globalCompositeOperation='source-atop';
  cctx.drawImage(texture,-texture.width/2,-texture.height/2)
  cctx.restore();
}

<canvas id="canvas" width=842 height=596></canvas>