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

时间:2016-07-23 15:29:06

标签: javascript arrays object canvas html5-canvas

我是个初学者。我想创建一个像素艺术网站。为此,我尝试开发我的JavaScript代码。现在我正在通过使用var作为对象和数组设置不同的矩形来简化代码,以避免键入milles of lines。我认为在第二部分创建一个数组构造函数,为2D数组中的每个矩形定义coords(其他x,其他y)。  目前我并不清楚为什么代码的第一部分无效。你能建议你的想法吗?非常感谢提前。   这是我的代码(link on JS Bin):

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

2 个答案:

答案 0 :(得分:1)

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

您输入了“i ++”#39;当使用字母&#39; j&#39;。 不确定这是否解决了这个问题。

为什么在

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

不容易设置&#39; var w&#39;到10?

var w = 10;

答案 1 :(得分:1)

您正在寻找如何创建类并从该类创建对象?

如果是这样,你就可以创建一个类并创建对象。

//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());

}