Fatal编程技术网
  • javascript/
  • 使用数组显示div元素。JavaScript

使用数组显示div元素。JavaScript

javascript html css arrays

使用数组显示div元素。JavaScript,javascript,html,css,arrays,Javascript,Html,Css,Arrays,我知道如何使用css和html来显示简单的形状，但我想使用数组来显示形状；因为我的下一个游戏项目将包括我必须一次又一次地复制形状。我对阵列的理解非常薄弱，我已经阅读了w3上的所有内容，这就是我到目前为止能够想到的关于显示简单行的内容 <!DOCTYPE html> <html> <body> <p id="lineDiv"></p> <script> var line = {width: 2px, height: 7px,

我知道如何使用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>




变量行={宽度：2px，高度：7px，颜色：红色}；
线性阵列[0]=直线；
document.getElementById（“lineDiv”）.innerHTML=lineArray[0]；
1-我的第一个问题是为什么不显示行？ 2-我的第二个问题是，如果我想根据我选择在哪个x/y轴上显示线来确定如何显示线，那么我会怎么做

请不要在这个答案中包含jquery，只使用基本javaScript；我甚至还没有开始阅读w3上的jquery内容。

这里有一些东西

始终使用
var
来声明对象

数组元素不是在JavaScript中动态分配的，因此请使用
数组。按

JSON对象中的文字字符串值必须使用引号赋值， 单人（
“1px”
）或双人（
“1px”
）

使用
JSON.stringify
在 浏览器

这里有几件事

始终使用
var
来声明对象

数组元素不是在JavaScript中动态分配的，因此请使用
数组。按

JSON对象中的文字字符串值必须使用引号赋值， 单人（
“1px”
）或双人（
“1px”
）

使用
JSON.stringify
在 浏览器

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

document.getElementById（“lineDiv”）.style.backgroundColor=“red”；
document.getElementById（“lineDiv”）.style.width=“100px”；
document.getElementById（“lineDiv”）.style.height=“7px”

不完全确定要执行什么操作，但需要使用“样式”属性来更改css



document.getElementById（“lineDiv”）.style.backgroundColor=“red”；
document.getElementById（“lineDiv”）.style.width=“100px”；
document.getElementById（“lineDiv”）.style.height=“7px”



检查控制台，会出现类似“未定义线性阵列”的错误。您需要的是
var lineArray=[line]
。然后，您可以通过
lineArray.push（另一行）
添加更多行，因此是否将我的“lineArray[0]=line；”替换为您的“var lineArray=[line]”？在这一点上，线条会显示出来？嗯，不完全是这样。它很可能会显示
[object object]
。不确定这是否是您想要的检查您的控制台，您将有一个类似于“lineArray未定义”的错误。您需要的是
var lineArray=[line]
。然后，您可以通过
lineArray.push（另一行）
添加更多行，因此是否将我的“lineArray[0]=line；”替换为您的“var lineArray=[line]”？在这一点上，线条会显示出来？嗯，不完全是这样。它很可能会显示
[object object]
。不确定这是否是你想要的有用的，但我在寻找一个文字行，而不是描述该行的字符串。很好的建议，不过。为此，你将需要一个图形引擎。你试过WebGL吗？它非常强大。我听说过，但我认为对于一条线来说，集成一个阵列并不是那么难。好的，我现在明白你想要实现什么了。我总结了一个小例子，说明了如何在
HTML
画布上画线。没问题。这是一个很好的资源。非常有用，但我要找的是文字行，而不是描述该行的字符串。很好的建议，不过。为此，你将需要一个图形引擎。你试过WebGL吗？它非常强大。我听说过，但我认为对于一条线来说，集成一个阵列并不是那么难。好的，我现在明白你想要实现什么了。我总结了一个小例子，说明了如何在
HTML
画布上画线。没问题。这是一个很好的资源。我更新了你的评论，是的，我很熟悉如何使用css和html造行，我只是想知道我是否可以为设计参数集成一个数组。首先，你的示例使用字典。您可以在div标记中放置一个span标记，然后更改span标记的innerHTML，并使用style=“width:50%”的内联css。。。。。。。从你的数组/字典和一些JS代码中获取innerHTML你的评论，是的，我熟悉如何使用css和html造行，我只是想知道我是否可以为设计参数集成一个数组。首先，你的示例使用字典。您可以在div标记中放置一个span标记，然后更改span标记的innerHTML，并使用style=“width:50%”的内联css。。。。。。。并从数组/字典中获取innerHTML和一些JS代码

<!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>



<!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>