将不同的纹理应用到 canvas 和 javascript 的叠加层

Question

我需要实现一种方法，将不同的纹理应用于相当复杂的嵌套 canvas。例如考虑这张图片：

Car

我想让用户为门选择一种布料，为 body 的其余部分选择另一种布料，具有不同的特性，例如比例、旋转角度和透明度。

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

非常感谢。

Answer 1

是的，您可以只使用原生 html5 canvas.

对您的汽车进行纹理化

不需要库，因为您的任务很简单，而且 canvas 有内置方法可以满足您的所有需求。

首先为汽车的每个部分创建图像。每个部分图像在您想要应用纹理的地方都是不透明的，在您不想应用纹理的地方是透明的。

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

您可以使用 context.scale 和 context.rotate 缩放和旋转纹理。

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

根据需要对零件进行纹理处理后，只需将内存中的（零件）canvas 绘制到主要 canvas。

这是示例代码和演示：

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>

将不同的纹理应用到 canvas 和 javascript 的叠加层

Apply different texture to overlayed canvas with javascript

html

javascript

textures

canvas