javascript - 如何在 JS 中将矩形设置为对象进行数组？

Question

我是初学者。我想创建一个像素艺术网站。为此，我尝试开发我的 javascript 代码。现在，我正在通过使用 var 作为对象和数组来设置不同的矩形来简化代码，以避免键入数百万行。比我想在第二部分创建一个数组构造函数，为二维数组中的每个矩形定义坐标(其他 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); 
  }
}

Answer 1

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

您在使用字母“j”时输入了“i++”。不确定这是否能解决问题。

为什么要用Math.abs

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

将 'var w' 设置为 10 不是更容易吗？

var w = 10;