如何将矩形设置为JS中的数组对象？

我是一个开始。我想创建一个像素艺术网站。为此，我尝试开发我的JavaScript代码。现在我正在通过使用var作为对象和数组来设置不同的矩形来简化代码，以避免键入数行代码。比我想在第二部分创建一个数组构造函数，为二维数组中的每个矩形定义坐标（其他x，其他y）。目前我不知道为什么代码的第一部分不起作用。你能提出你的想法吗？提前致谢。这里是我的代码（link on JS Bin）：如何将矩形设置为JS中的数组对象？

var canvas; 
var ctx; 
var x = 0; 
var y = 0; 
var w = 10; // Width=10px 
var h = w; // Heigth=10px 

function init() { 
canvas = document.querySelector('#myCanvas'); 
ctx = canvas.getContext('2d'); 
draw(); 
} 

// Create a rect by path method for restoring the buffer 
var rect; 
function draw(){ 
    ctx.beginPath(); 
    ctx.rect(x,y,w,h); 
} 

var c = ['#66757F', '#F7F7F7', '#CCD6DD']; // Setting a color palette as an array 
    for (var i=0; i<c.length; i++){ 
    c[i]=ctx.fillStyle(); 
    } 

// Define colored rectangles as the Objects 
var r1 = {rect;[0]} 
var r2 = {rect;[1]} 
var r3 = {rect;[2]} 
ctx.fill(); 

// Setting three rectangle by diagonal 
var r=[r1,r2,r3];// Array of setted rectangles 
function draw(){ 
    for (var j=0; j<r.length; j++){ 
    r[j]=ctx.moveTo(x+w*j,y+h*j); 
    } 
}

来源

2016-07-23 o_k_s_a_n_a

for (var j=0; j<r.length; i++){ 
r[j]=ctx.moveTo(x+w*j,y+h*j); 
}

你键入'我++使用字母时， 'J'。不确定这是否解决了问题。

为什么使用Math.abs在

var w = Math.abs(-10); // Width=10px

是不是很容易就能设置 '变种W' 到10？

var w = 10;

来源

2016-07-23 15:44:34 Krandalf

谢谢Krandalf，我确实犯了错误，并输入了你的建议更改，但代码仍然不起作用。我想问题是var r1 = {rect; [0]}，因为填充方法看不到数组 –

你正在寻找如何创建类和从该类中创建对象？

如果是这样，您将如何创建一个类并创建对象。

//This will hold all of your objects. 
var listOfObjects = []; 

//This is a class. You can create objects with it. 
function myClass() { 

    //location 
    this.X = 0; 
    this.Y = 0; 

    //size 
    this.width = 5; 
    this.height = 5; 

} 

function CreateNewObject() { 

    //This will create and add an object of myClass to your array. 
    //Now you can loop through the array and modify the values as you wish. 
    listOfObjects.push(new myClass()); 

}

来源

2016-07-23 21:36:14

中设置的颜色谢谢@DanielDees，因为我没有使用类构造函数创建对象/数组的经验这一刻我只是通过实现Object.defineProperty：[link]（https://jsbin.com/?html,js,output）来实现更改后的代码，但它仍然不起作用。 –

如何将矩形设置为JS中的数组对象？

回答

相关问题