根據選定的單選按鈕在HTML畫布上顯示不同的圖像

Question

使用此項目，您應該能夠爲特定顏色選擇單選按鈕，單擊藍色大按鈕，並且將繪製相應的150x150px色樣在HTML畫布上。我已經完成了所有的工作，直到要顯示圖像的部分。我被困在switch語句中。

我也做了一個的jsfiddle此：

https://jsfiddle.net/sheradon/yuqqono6/12/

$(document).ready(function() 
{  

var tabClicked = true; 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
var imgArray = new Array(); 

imgArray[0] = new Image(); 
imgArray[0].src = 'http://i.imgur.com/utPXYZM.jpg'; 

imgArray[1] = new Image(); 
imgArray[1].src = 'http://i.imgur.com/j7CfXVF.jpg'; 

imgArray[2] = new Image(); 
imgArray[2].src = 'http://i.imgur.com/muNhjqq.jpg'; 

imgArray[3] = new Image(); 
imgArray[3].src = 'http://i.imgur.com/SSSSvkD.jpg'; 

imgArray[4] = new Image(); 
imgArray[4].src = 'http://i.imgur.com/KMCsKTX.jpg'; 

imgArray[5] = new Image(); 
imgArray[5].src = 'http://i.imgur.com/QNe0jAr.jpg'; 

imgArray[6] = new Image(); 
imgArray[6].src = 'http://i.imgur.com/QbzmJlE.jpg'; 

    $('#colorstab').click(function() 
    {   
     if(tabClicked == true)  
     {     
     $('#colorstab').animate( 
     {     
      marginTop:'-8px'  
     }, 0);          
    $('#colorsbox').toggle();  
     tabClicked = false;   
     } else {          
     $('.radiobutton').prop('checked', false);  
     $('#colorstab').animate(    
     {         
      marginTop:'83px'  
     }, 0);   
    $('#colorsbox').toggle();      
    tabClicked = true;        
    } 
    }); 
}); 

function doButtonStuff() 
{ 
     console.log('Button is working'); 
    var radioButton = document.getElementsByName('selection'); 
    for (var i = 0; i < document.filterform.selection.length; i++) 
    {  
     if (document.filterform.selection[i].checked)    
     { 
     var radioValue = document.filterform.selection[i].value;  
      alert(radioValue); 
     return radioValue; 
     } 
    switch (document.getElementById('canvas')) 
    { 
     case (radioValue == 'cyan'): 
      canvas.getContext('2d').drawImage(imgArray[6],0,0); 
      break; 
    } 
    } 
} 

Answer 1

這不是如何switch statements工作。

開關語句將一個值與多個其他值進行比較。以此爲例子：

var inputValue = document.getElementById('favorite-color-input').value; 
switch (inputValue) { // compare the input value 
    case 'green':  // if 'inputValue' === 'green', execute the following block 
    console.log('your favorite color is green'); 
    break;   // don't execute the next case block 
    case 'blue':  // if 'inputValue' === 'blue', execute the following block 
    console.log('...'); 
    break; 
    default:   // neither green nor blue 
    console.log('I don\'t know that color'); 
} 

所以，你的switch語句應該是這樣的：

switch (radioValue) { 
    case 'cyan': // draw the cyan image 
    ctx.drawImage(imgArray[6],0,0); 
    break; 
    case 'pink': // draw the pink image 
    ctx.drawImage(imgArray[...],0,0); 
    break; 
} 

請注意，您在執行switch語句之前return radioValue。我認爲那不是你想要的。此外，不要總是獲取畫布的繪圖上下文（canvas.getContext('2d')），請使用ctx。

但是，有一個原因讓你很少在JavaScript中看到switch語句：在大多數情況下，你不需要它們。考慮創建包含所有圖像的對象：

// map every color to the source of the corresponding image 
var imageSources = { 
    'cyan': 'http://i.imgur.com/QbzmJlE.jpg', 
    'pink': '...' 
}; 
var images = {}; 
// map every color to the corresponding image 
for (var color in imageSources) { 
    images[color] = new Image(); 
    images[color].src = imageSources[color]; 
} 

images現在看起來像：

{ 
    'cyan': <img src="http://i.imgur.com/QbzmJlE.jpg">, 
    'pink': <img src="..."> 
} 

後來，當你畫的圖像：

if (images.hasOwnProperty(radioValue)) { 
    var image = images[radioValue]; 
    canvas.getContext('2d').drawImage(image, 0, 0); 
} else { 
    // the image doesn't exist 
}