Question

现在，如果我更换行：

for(i = 25;i<1000;i*=2){
    pen.DrawStar(i,ctx);
}

对此：

pen.DrawStar(25,ctx);
pen.DrawStar(50,ctx);
pen.DrawStar(100,ctx);
pen.DrawStar(200,ctx);
pen.DrawStar(400,ctx);
pen.DrawStar(800,ctx);

我得到了所需的输出（而不是破碎的页面），虽然我理解它的2个片段功能相同......

所以这是代码的其余代码。我有一个非常简单的hello world js程序，它绘制了一个涂鸦和一个引用它的html文件。

Java脚本在这里：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var pen = {
    DrawStar : function (size,ctx){
        ctx.lineWidth = 1;
        ctx.fillStyle = "black";
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(size/2,i);
            ctx.lineTo(size/2-i,size/2);
            ctx.stroke();
        }
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(size-i,size/2);
            ctx.lineTo(size/2,size/2-i);
            ctx.stroke();
        }
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(i,size/2);
            ctx.lineTo(size/2,size/2+i);
            ctx.stroke();
        }
        for (i = 0; i < size/2; i+=10) {
            ctx.moveTo(size/2,size-i);
            ctx.lineTo(size/2+i,size/2);
            ctx.stroke();
        }   
    }
}
for(i = 25;i<1000;i*=2){ // This is the loops that seems to cause problems..
    pen.DrawStar(i,ctx);
}
ctx.font = "30px Arial";
ctx.fillText("Hello, World!",477,30);

我也尝试了一个while循环，似乎也以同样的方式挂断了。

这是html：

<!DOCTYPE html>
<html>
    <head>
        <h1>This is some JavaScript</h1>
    </head>
    <body>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <canvas id='myCanvas' width='800' height='800'>
                Displayed if your browser does not support HTML5 Canvas.
        </canvas>
        <script type='text/javascript' src="first.js"></script>
    </body>
</html>

真正的长读，我的样式表......

canvas {
    border: 1px dotted black;
}

（P.s。这是所需的输出）

Answer 1

感谢您的投入，很明显我是JS的新手，经过一番观察，我认为我已经以正确的方式完成了这项工作。我将局部变量I添加到我的var pen中，并将其（this.i）用于调用中的所有迭代。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var pen = {
    i : 0,
    DrawStar : function (size,ctx){
        ctx.lineWidth = 1;
        ctx.fillStyle = "black";
        for (this.i = 0; this.i < size/2; this.i+=10) {
            ctx.moveTo(size/2,this.i);
            ctx.lineTo(size/2-this.i,size/2);
            ctx.stroke();
        }
        for (this.i = 0; this.i < size/2; this.i+=10) {
            ctx.moveTo(size-this.i,size/2);
            ctx.lineTo(size/2,size/2-this.i);
            ctx.stroke();
        }
        for (this.i = 0; this.i < size/2; this.i+=10) {
            ctx.moveTo(this.i,size/2);
            ctx.lineTo(size/2,size/2+this.i);
            ctx.stroke();
        }
        for (this.i = 0; this.i < size/2; this.i+=10) {
            ctx.moveTo(size/2,size-this.i);
            ctx.lineTo(size/2+this.i,size/2);
            ctx.stroke();
        }
    }
}
for(this.i = 25; this.i < 1000; this.i*=2){
    pen.DrawStar(i,ctx);
}
ctx.font = "30px Arial";
ctx.fillText("Hello, World!",477,30);

Answer 2

我在DrawStar函数的末尾需要一个分号，如下所示：

[ [[[UIApplication sharedApplication] keyWindow] rootViewController] presentViewController:alert animated:YES Completion:nil];

带循环的迭代函数调用会导致意外问题

2 个答案: