Question

以下是我的HTML和JavaScript文件。 html文件运行正常，但JavaScript文件中有错误，我想知道为什么会出现错误以及如何纠正错误。我正在尝试使用用户输入绘制一朵花。

<DOCTYPE html>
<html>
   <head>
      <title> Lab 8: Arrays </title>
      <meta charset = "UTF-8"/>
      <script src = "lab8.js"></script>
   </head>
   <body onload = "setup()">
      Number of Petals
      <input id = "text1" type = "text" value = "">
      <br><br>
      Number of Points
      <input id = "text2" type = "text" value = "">
      <br><br>
      <input id = "draw" input type ="button" value="Draw" onclick="draw()">
      <section id = "outputSection"></section>
      <canvas id = "drawingSurface" width = "600" height = "600" style = "border-style: solid"></canvas>
   </body>
</html>

javascript：

var N, M, r;
var ctx;
var coordinates;
var arr = [];
function setup(){
ctx = document.getElementById("drawingSurface").getContext("2d");
ctx.translate(300,300);
}



function drawShape(){
    var numPetals = document.getElementById("text1").value;
    var numPoints = document.getElementById("text2").value;
    coordinates = getCoordinates(numPetals,NumPoints, 300);
    draw(coordinates);      
}

function GenerateXY(M,N,r){
    coordinates = [[10,10],[20,20]];

    for(var i = 0; i <= M; i += 1){
        var angle = i * 2 * Math.PI / M;
        var r2 = Math.abs(Math.sin(angle * N / 2));
        var x = r2*Math.sin(angle);
        var y = r2*Math.cos(angle);

        coordinates[i] = [x,y];

    }
    return coordinates;
}

function draw(arr){
    ctx = document.getElementById("drawingSurface").getContext("2d");
    ctx.save();
    ctx.beginPath();
    for(var i = 0; i < arr.length; i+=1){
        ctx.lineTo(arr[i][0], arr[i][1]);
    }
    ctx.stroke();
    ctx.restore();
}

我的上一个功能遇到问题，（draw）。控制台说它cannot read property "length"，我不知道如何解决这个问题。

Answer 1

您的HTML点击处理程序：

<input id = "draw" input type ="button" value="Draw" onclick="draw()">

正在调用draw()，但您的函数签名期望将数组传递给绘制，如draw(arr)中所示。这就是arr未定义的原因，因此arr.length会引发错误。

如果你的意思是draw()只是处理全局变量arr，那么你可以从函数定义中删除它，如下所示：

function draw(){
    ctx = document.getElementById("drawingSurface").getContext("2d");
    ctx.save();
    ctx.beginPath();
    for(var i = 0; i < arr.length; i+=1){
        ctx.lineTo(arr[i][0], arr[i][1]);
    }
    ctx.stroke();
    ctx.restore();
}

作为对代码的一般观察，函数中使用的变量应声明为函数内部为var的局部变量，如下所示：

var ctx = document.getElementById("drawingSurface").getContext("2d");

这可以防止多个函数通过使用相同的全局变量为自己的私有使用而意外地相互冲突，并防止全局命名空间的污染。它还允许项目扩展和共享而不会发生冲突。

为什么我的功能不会运行？

1 个答案: