將不同的紋理應用於覆蓋的canvas使用javascript

Question

我需要實現一種將不同紋理應用於相當複雜的嵌套canvas的方法。例如，考慮這一形象：

Car

我想讓用戶選擇向門口織物以及其他對身體的其餘部分具有不同的功能，如縮放，旋轉角度和透明度。

有沒有一個js庫，可以幫助或純JavaScript（也許與HTML5）就夠了？

非常感謝。

Answer 1

是的，你可以使用本地html5畫布紋理你的車。因爲你的任務很簡單，帆布內置了所有你想要做的事情的方法

號庫是必要的。

首先爲您的汽車的每個部分創建圖像。每個部分圖像在您希望應用紋理的位置都是不透明的，而在您不希望應用紋理的位置則是透明的。

要應用紋理任何部分，第一繪製第二內存畫布上的一部分。然後在第二個畫布上繪製紋理。您可以使用source-atop合成模式將紋理限制爲僅填充到所需的部分。

可以縮放&使用context.scale & 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>