Fatal编程技术网

使用循环绘制javascript行

javascript loops canvas graph

使用循环绘制javascript行,javascript,loops,canvas,graph,Javascript,Loops,Canvas,Graph,我用javascript绘制了一个简单的图形，并用下面的代码将其显示在html画布上 <html> <body> <canvas id="myCanvas" width="600" height="500" style="border:1px solid #d3d3d3;"></canvas> <script> var dat = new Array(1,2,4,8,16,32,64,128,256); var c=document.

我用javascript绘制了一个简单的图形，并用下面的代码将其显示在html画布上

<html>
<body>
<canvas id="myCanvas" width="600" height="500" style="border:1px solid #d3d3d3;"></canvas>
<script>

var dat = new Array(1,2,4,8,16,32,64,128,256);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,300-dat[0]);
ctx.lineTo(50,300-dat[1]);
ctx.lineTo(100,300-dat[2]);
ctx.lineTo(150,300-dat[3]);
ctx.lineTo(200,300-dat[4]);
ctx.lineTo(250,300-dat[5]);
ctx.lineTo(300,300-dat[6]);
ctx.lineTo(350,300-dat[7]);
ctx.lineTo(400,300-dat[8]);
ctx.stroke();

</script>
<html>


var dat=新数组（1,2,4,8,16,32,64128256）；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.moveTo（0300 dat[0]）；
ctx.lineTo（50300 dat[1]）；
ctx.lineTo（100300 dat[2]）；
ctx.lineTo（150300 dat[3]）；
ctx.lineTo（200300 dat[4]）；
ctx.lineTo（250300 dat[5]）；
ctx.lineTo（300300 dat[6]）；
ctx.lineTo（350300 dat[7]）；
ctx.lineTo（400300 dat[8]）；
ctx.stroke（）；
在这段代码中，每一行都是使用名为dat的数组中的数据绘制的。但是我如何创建一个循环来绘制线，而不是像代码中那样在没有循环的情况下单独绘制每条线呢

我尝试了下面的for循环，但没有成功

<script>
var dat = new Array(1,2,4,8,16,32,64,128,256);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//ctx.moveTo(0,250);
ctx.moveTo(0,300-dat[0]);
var j = 0;
for(int i = 1; i < 9; i++){
    j = j + 50;
    ctx.lineTo(j,300-dat[i]);
    ctx.stroke();
}
</script>


var dat=新数组（1,2,4,8,16,32,64128256）；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
//ctx.moveTo（0250）；
ctx.moveTo（0300 dat[0]）；
var j=0；
对于（int i=1；i<9；i++）{
j=j+50；
ctx.lineTo（j，300 dat[i]）；
ctx.stroke（）；
}
还有其他方法吗？

javascript中没有
int
声明。如果将其替换为适当的
var
，则您的函数可以工作：

var dat = new Array(1,2,4,8,16,32,64,128,256);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//ctx.moveTo(0,250);
ctx.moveTo(0,300-dat[0]);
var j = 0;
for(var i = 1; i < 9; i++){
    j = j + 50;
    ctx.lineTo(j,300-dat[i]);
    ctx.stroke();
}
工作

javascript中没有
int
声明。如果将其替换为适当的
var
，则您的函数可以工作：

var dat = new Array(1,2,4,8,16,32,64,128,256);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//ctx.moveTo(0,250);
ctx.moveTo(0,300-dat[0]);
var j = 0;
for(var i = 1; i < 9; i++){
    j = j + 50;
    ctx.lineTo(j,300-dat[i]);
    ctx.stroke();
}
工作

javascript中没有
int
声明。如果将其替换为适当的
var
，则您的函数可以工作：

var dat = new Array(1,2,4,8,16,32,64,128,256);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//ctx.moveTo(0,250);
ctx.moveTo(0,300-dat[0]);
var j = 0;
for(var i = 1; i < 9; i++){
    j = j + 50;
    ctx.lineTo(j,300-dat[i]);
    ctx.stroke();
}
工作

javascript中没有
int
声明。如果将其替换为适当的
var
，则您的函数可以工作：

var dat = new Array(1,2,4,8,16,32,64,128,256);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//ctx.moveTo(0,250);
ctx.moveTo(0,300-dat[0]);
var j = 0;
for(var i = 1; i < 9; i++){
    j = j + 50;
    ctx.lineTo(j,300-dat[i]);
    ctx.stroke();
}
在javascript中工作时，应该使用
var
而不是
int
。 您还可以简化代码：

var dat = new Array(1,2,4,8,16,32,64,128,256);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");zz

for(var i = 0; i < dat.length; i++){
    ctx.lineTo(i*50,300-dat[i]);
    ctx.stroke();
}

var-dat=新数组（1,2,4,8,16,32,64128256）；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；zz
对于（变量i=0；i
在javascript中，您应该使用
var
而不是
int
。 您还可以简化代码：

var dat = new Array(1,2,4,8,16,32,64,128,256);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");zz

for(var i = 0; i < dat.length; i++){
    ctx.lineTo(i*50,300-dat[i]);
    ctx.stroke();
}

var-dat=新数组（1,2,4,8,16,32,64128256）；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；zz
对于（变量i=0；i
在javascript中，您应该使用
var
而不是
int
。 您还可以简化代码：

var dat = new Array(1,2,4,8,16,32,64,128,256);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");zz

for(var i = 0; i < dat.length; i++){
    ctx.lineTo(i*50,300-dat[i]);
    ctx.stroke();
}

var-dat=新数组（1,2,4,8,16,32,64128256）；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；zz
对于（变量i=0；i
在javascript中，您应该使用
var
而不是
int
。 您还可以简化代码：

var dat = new Array(1,2,4,8,16,32,64,128,256);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");zz

for(var i = 0; i < dat.length; i++){
    ctx.lineTo(i*50,300-dat[i]);
    ctx.stroke();
}

var-dat=新数组（1,2,4,8,16,32,64128256）；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；zz
对于（变量i=0；i
inti
？？您可能是指
var i
。它应该可以工作。您可以创建一个小提琴来重现问题吗？（另外，您不需要将
j
变量保留在for循环中，只需
ctx.lineTo（i*50300 dat[i]）
就可以了）编辑：GitaarLab是对的，
var i
而不是
int i
，它下次会在for循环中查看错误消息。
int i
？？您可能是指
var i
。它应该可以工作。您可以创建一个小提琴来重现问题吗？（另外，您不需要将
j
变量保留在for循环中，只需
ctx.lineTo（i*50300 dat[i]）
就可以了）编辑：GitaarLab是对的，
var i
而不是
int i
，它下次会在for循环中查看错误消息。
int i
？？您可能是指
var i
。它应该可以工作。您可以创建一个小提琴来重现问题吗？（另外，您不需要将
j
变量保留在for循环中，只需
ctx.lineTo（i*50300 dat[i]）
就可以了）编辑：GitaarLab是对的，
var i
而不是
int i
，它下次会在for循环中查看错误消息。
int i
？？您可能是指
var i
。它应该可以工作。您可以创建一个小提琴来重现问题吗？（另外，您不需要保留
j
变量，只需
ctx.lineTo（i*50300 dat[i]）
即可）编辑：GitaarLab是正确的，
var i
而不是for循环中的
int i
，它下次会查看错误消息。我喜欢你的答案，所以我愚弄了一下，稍微简化了一下-将for循环替换为：
dat.forEach（function（el，idx）{ctx.lineTo（idx*50，300 el）；}）；ctx.stroke（）我喜欢你的答案，所以我做了一点简化，将for循环替换为：
dat.forEach（function（el，idx）{ctx.lineTo（idx*50300el）；}）；ctx.stroke（）我喜欢你的答案，所以我做了一点简化，将for循环替换为：
dat.forEach（function（el，idx）{ctx.lineTo（idx*50300el）；}）；ctx.stroke（）我喜欢你的答案，所以我做了一点简化，将for循环替换为：
dat.forEach（function（el，idx）{ctx.lineTo（idx*50300el）；}）；ctx.stroke（）