Question

我知道如何使用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的东西。

Answer 1

这里有一些事情

始终使用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>

Answer 2

不完全确定你想要做什么，但你需要使用style属性来改变css

＆＃13;

document.getElementById("lineDiv").style.backgroundColor = "red";
document.getElementById("lineDiv").style.width = "100px";
document.getElementById("lineDiv").style.height = "7px";

＆＃13;

<body>
<div id="lineDiv"></div>


</body>

＆＃13;

使用数组显示div元素。 JavaScript的

2 个答案: