如何将矩形设置为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);
}
}
答
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;
答
你正在寻找如何创建类和从该类中创建对象?
如果是这样,您将如何创建一个类并创建对象。
//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());
}
+0
中设置的颜色谢谢@DanielDees,因为我没有使用类构造函数创建对象/数组的经验这一刻我只是通过实现Object.defineProperty:[link](https://jsbin.com/?html,js,output)来实现更改后的代码,但它仍然不起作用。 –
谢谢Krandalf,我确实犯了错误,并输入了你的建议更改,但代码仍然不起作用。我想问题是var r1 = {rect; [0]},因为填充方法看不到数组 –