合成：如何根據單選按鈕中選定的選項動態更改畫布新圖形？

Question

我有一個related question個月前關於通過合成（HTML5帆布）着色畫布。當我再次遇到它時，我會以某種方式理解它是如何工作的。但今天我的問題是，是否可以通過單選按鈕更改所繪製像素的分層而不會影響已選顏色的其他圖層？

要掌握我的意思，我創建了一個工作JSFIDDLE。 （對不起CSS）

解釋小提琴：我目前有，是我可以改變樣品圖像和花在中心的背景顏色。現在，如果您點擊灰色按鈕「更改中心圖像」，將出現一個模式，顯示2個樣本中心圖像，花朵和爪子。我想要實現的是根據模態上選定的項目更改以前繪製的畫布（這是花）。比方說，我點擊爪子圖像，我應該能夠看到爪子，而不是花。選定的背景顏色不得受到影響。

這可能嗎？如果不是，還有其他方法嗎？

所以這是我的JavaScript：

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

var centerImgDefaultColor = "#f6de16"; 
var baseColor = "#d85700"; 

var imageURLs = []; 
var imagesOK = 0; 
var imgs = []; 

var images = ["http://s23.postimg.org/y8hbni44b/base.png","http://s10.postimg.org/592v9dsd5/flower.png","http://s10.postimg.org/592v9dsd5/flower.png"]; 
for (var i = 0; i < images.length; i++) {   
imageURLs.push(images[i]); 
} 
loadAllImages(); 

function loadAllImages() { 
for (var i = 0; i < imageURLs.length; i++) { 
    var img = new Image(); 
    imgs.push(img); 
    img.onload = function() { 
     imagesOK++; 
     imagesAllLoaded(); 
    }; 
    img.src = imageURLs[i]; 
} 
} 

var imagesAllLoaded = function() { 

if (imagesOK >= imageURLs.length) { 
    base = imgs[0]; 
    paw = imgs[1]; 
    overlay = imgs[2]; 
    draw(); 
} 

}; 


function draw() { 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.save(); 

ctx.drawImage(overlay, 0, 0); 
ctx.fillStyle = centerImgDefaultColor; 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
ctx.globalCompositeOperation = "destination-atop"; 
ctx.drawImage(paw, 0, 0); 

ctx.drawImage(base, 0, 0); 
ctx.fillStyle = baseColor; 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
ctx.globalCompositeOperation = "destination-atop"; 
ctx.restore(); 
} 

$(".paw").click(function() { 
centerImgDefaultColor = '#' + $(this).attr("value"); 
draw(); 
}); 

$(".base").click(function() { 
baseColor = '#' + $(this).attr("value"); 
draw(); 
}); 

而我的HTML：

<div style="float:left;"> 
    <p>Background Color</p> 
    <div class="base" style="width:25px;height:25px;background-color:#000000;" value="000000"></div> 
    <div class="base" style="width:25px;height:25px;background-color:#7da7de;" value="7da7de"></div> 
    <div class="base" style="width:25px;height:25px;background-color:#d85700;" value="d85700"></div> 
</div> 

<div style="float:right;"> 
    <p>Center Image Color</p> 
    <div class="paw" style="width:25px;height:25px;background-color:#040054;" value="040054"></div> 
    <div class="paw" style="width:25px;height:25px;background-color:#267d00;" value="267d00"></div> 
    <div class="paw" style="width:25px;height:25px;background-color:#f6de16;" value="f6de16"></div>  
</div> 
<a class="button" href="">Change center image</a> 

<div id="modal"> 
    <a href="" class="close">&#215;</a> 
    <input type="radio" class="btn-img" name="imageLayout" value="flower" checked="checked"/><img src="http://s10.postimg.org/6j3y3l979/prev_flower.png"/> 
    <input type="radio" class="btn-img" name="imageLayout" value="paw"/><img src="http://s1.postimg.org/gtmv5giwr/prev_paw.png"/> 
</div> 
<div class="modal-bg"></div> 

<canvas id="canvas" width=310 height=450></canvas> 

其實我想先上得到單選按鈕的值，並通過加載它在我的圖像陣列點擊功能，但我認爲這是不可能的。

$(".btn-img").click(function() { var val = 
    $('input[name="imageLayout"]:checked').val(); 
}); 

所以我想用這樣的事情在我的JS（假設圖片來自我的服務器來，所以我使用的圖像直接名稱）：

var selectedimageLayout = $('input[name="imageLayout"]:checked').val(); 
var imageLayoutSample = selectedimageLayout + ".png"; 

，並把它傳遞給我的圖像陣列作爲：

var images = ["http://s23.postimg.org/y8hbni44b/base.png",imageLayoutSample ,imageLayoutSample]; 

但我不能動態讓它改變，當我點擊一個單選按鈕。

我會非常感謝任何意見，建議或答案。謝謝。

Answer 1

你可以聽上使用此jQuery選擇你的模式單選按鈕點擊：根據哪個單選按鈕

#modal input[type=radio] 

然後重新繪製場景被點擊：

$('#modal input[type=radio]').click(function(){ 
    var imageName=$(this).val(); 
    if(imageName=='paw'){ 
     // draw the paw in the specified colors 
    }else if(imageName=='flower'){ 
     // draw the flower in the specified colors 
    } 
}); 

[增加：使用合成來組成圖像+背景]

這裏有一個接受imageObject，背景顏色&前景色和使用合成重新着色使用指定的背景imageObject重繪功能：

function redraw(img,background,foreground){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.drawImage(img,0,0); 
    ctx.globalCompositeOperation='source-in'; 
    ctx.fillStyle=foreground; 
    ctx.fillRect(0,0,canvas.width,canvas.height); 
    ctx.globalCompositeOperation='destination-over'; 
    ctx.fillStyle=background; 
    ctx.fillRect(0,0,canvas.width,canvas.height); 
    ctx.globalCompositeOperation='source-over'; 
}