根据选定的单选按钮在 HTML canvas 上显示不同的图像

Question

使用这个项目，你应该能够select一个特定颜色的单选按钮，点击蓝色大按钮，相应的 150x150px 色样将绘制在 HTML canvas。我已经把所有东西都弄下来了，直到要显示图像的部分。我卡在 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 的工作方式。

Switch 语句将一个值与多个其他值进行比较。以此为例：

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;
}

请注意，您 return radioValue 在执行 switch 语句之前。我认为那不是你想要的。此外，不要总是获取 canvas (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
}

根据选定的单选按钮在 HTML canvas 上显示不同的图像

Displaying different images on an HTML canvas according to selected radio button

html

canvas

case

radio

switch-statement