Question

我用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>

在此代码中，每行都使用名为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>

还有其他方法吗？

Answer 1

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();
}

工作jsfiddle here。

从这里开始，您可以通过不对dat数组length进行硬编码并对其进行缓存来改进代码：

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

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

工作fiddle here

Answer 2

在JavaScript中

，您应该使用var而不是int。并且您可以简化代码：

demo

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();
}

用循环绘制javascript线

2 个答案: