我知道如何使用 css 和 html 来显示简单的形状，但我想使用数组来显示形状；因为我的下一个游戏元素将包括我不得不一遍又一遍地复制形状。我对数组的理解非常薄弱，我已经阅读了 w3 上的所有内容，这是迄今为止我在显示简单线条方面所能想到的。
<!DOCTYPE html>
<html>
<body>
<p id="lineDiv"></p>
<script>
var line = {width: 2px, height: 7px, color: red};
lineArray[0] = line;
document.getElementById("lineDiv").innerHTML = lineArray[0];
</script>
</body>
</html>
1-我的第一个问题是为什么不显示该行？ 2-我的第二个问题是，当我想出如何根据我选择显示线条的 x/y 轴来显示线条时，如果我想生成多条线条，我该怎么办？
请不要在此答案中包含 jquery，只需使用基本的 javaScript；我什至还没有开始阅读 w3 上的 jquery 内容。
最佳答案
这里有几件事
始终使用var 来声明对象。
数组元素在 JavaScript 中不是动态分配的，所以使用
array.push。
JSON 对象中的文字字符串值必须使用引号分配，
单 ('1px') 或双 ("1px")。
使用JSON.stringify查看JSON对象数据
浏览器。
<!DOCTYPE html>
<html>
<body>
<p id="lineDiv"></p>
<script>
var line = {width: '2px', height: '7px', color: 'red'}; // set literal string values using quotes
var lineArray = []; //declare the array
lineArray.push(line); //add to the array
document.getElementById("lineDiv").innerHTML = JSON.stringify(lineArray[0]); //convert object to string
</script>
</body>
</html>
更新
为了在 HTML 中将实线呈现到屏幕上，您需要使用 Canvas。这是一个非常小的示例，但它应该足以帮助您指明正确的方向。很抱歉之前没有弄清楚您的意图。
<!DOCTYPE html>
<html>
<head>
<script>
var main = function () {
var c = document.getElementById('c'),
ctx = c.getContext('2d'),
lineArray = [];
lineArray.push({x: 10, y: 10, x2: 100, y2: 10, color: 'red'});
lineArray.push({x: 10, y: 100, x2: 150, y2: 100, color: 'blue'});
lineArray.push({x: 10, y: 150, x2: 200, y2: 150, color: 'green'});
for (i = 0; i < lineArray.length; ++i) {
ctx.beginPath();
ctx.moveTo(0,0);
ctx.moveTo(lineArray[i].x, lineArray[i].y);
ctx.lineTo(lineArray[i].x2, lineArray[i].y2);
ctx.strokeStyle = lineArray[i].color;
ctx.stroke();
}
};
</script>
</head>
<body onload="main()">
<canvas id="c"></canvas>
</body>
</html>
关于javascript - 使用数组显示 div 元素。 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43243918/