对象jQuery中数组的访问元素
我想用一个颜色填充画布，这个颜色是一个对象内部数组的元素，元素索引应该是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');警报也不会开火。
回答 2
Stack Overflow用户
发布于 2015-04-25 23:10:10
这里的主要问题是您需要使用colorObj[color]来获取颜色列表，而不是colorObj.color，因为您希望使用color变量的值来选择colorObj中的特定颜色列表。(我想您以后可能在colorObj中有一个colorObj条目，对吗？)
此外，通过使用1启动循环，您丢失了颜色列表的第一个元素，10循环限制应该使用颜色列表的.length而不是硬编码。
在循环中的几个变量上缺少一个var，由于您将cc、canvas.width和canvas.height都设置为相同的值，所以最好在一条语句中这样做。
作为一个简化技巧，没有必要给您的canvas元素一个顺序ID并使用getElementById()查找它。相反，您可以在创建元素时保存对元素的引用，只需使用该引用即可。
我还为width=元素提取了canvas代码中的canvas和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');Stack Overflow用户
发布于 2015-04-25 23:05:39
color1数组字符串中的值还是其他变量中的值？如果它们是字符串，则应该是：
color1: ['orange','amber','apricot','tangerine','bittersweet','persimmon','salmon','peach','pumpkin']请记住，数组中的第一个元素有索引0，因此要修复for循环，我需要这样做：
for(var i = 0; i < colorsObj.color1.length; i++)在使用alert(colorsObj.color[i]);而不是alert(colorsObj.color1[i]); (color1，而不是颜色)的警报语句中也有一个错误。
https://stackoverflow.com/questions/29871630
复制相似问题
腾讯云开发者
