javascript - jQuery对象内部数组的访问元素

Question

我想用一种颜色填充 Canvas ，该颜色是对象内数组的一个元素，元素索引应为 i 但代码似乎有误。 color1 中的变量已经声明并包含一个字符串，该字符串是颜色的十六进制值。

var colorsObj = {
    color1: [orange,amber,apricot,tangerine,bittersweet,persimmon,salmon,peach,pumpkin]
}

function drawCanvas(color) {
    for(var i = 1; i < 10; i++){
    $('.app').append('<canvas class="shadescolors" id="shade'+i+'"  width="100" height="100">');
    var canvas = document.getElementById('shade'+i);
    var context = canvas.getContext('2d');

    canvas.width = window.innerWidth / 3;
    cc = canvas.width;
    radius = cc/2-10;
    canvas.height = canvas.width;
    context.beginPath();
    context.arc(cc/2, cc/2, cc/2-10, 0, Math.PI*2, true);
    alert(colorsObj.color[i]);
    context.fillStyle = colorsObj.color[i];
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = '#8A8A8A';
    context.stroke();
    }
}

drawCanvas('color1');

警报也不会触发。

Answer 1

这里的主要问题是您需要使用 colorObj[color] 而不是 colorObj.color 来获取您的颜色列表，因为您想要使用 <color 变量的 em>value 用于选择 colorObj 中的特定颜色列表。 (我假设您以后可能在 colorObj 等中有一个 color2 条目，对吗？)

此外，通过使用 1 开始循环，您还缺少颜色列表的第一个元素，并且 10 循环限制应使用 .length 颜色列表而不是硬编码。

您在循环内的几个变量上缺少 var，并且由于您设置了 cc、canvas.width，和 canvas.height 都具有相同的值，您也可以在一个语句中完成所有这些操作。

作为一个简化提示，没有必要为您的 canvas 元素提供一个顺序 ID 并使用 getElementById() 来查找它。相反，您可以在创建元素时保存对元素的引用并直接使用它。

我还把 canvas 元素的 HTML 代码中的 width= 和 height= 去掉了；它们是多余的，因为您要在代码中设置宽度和高度。

最后，请缩进您的代码! :-)

所以你可以尝试这样的事情:

var colorsObj = {
    color1: [ orange,amber,apricot,tangerine,bittersweet,persimmon,salmon,peach,pumpkin ]
}

function drawCanvas( color ) {
    var colorList = colorsObj[color];
    for( var i = 0;  i < colorList.length;  i++ ) {
        var $canvas = $('<canvas class="shadescolors">').appendTo('.app');
        var canvas = $canvas[0];
        var context = canvas.getContext('2d');

        var cc = canvas.width = canvas.height = window.innerWidth / 3;
        var radius = cc/2-10;
        context.beginPath();
        context.arc(cc/2, cc/2, cc/2-10, 0, Math.PI*2, true);
        context.fillStyle = colorsList[i];
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = '#8A8A8A';
        context.stroke();
    }
}

drawCanvas('color1');