Javascript 为什么赢了'；我的函数不能运行吗？_Javascript_Html_Arrays

Javascript 为什么赢了'；我的函数不能运行吗？

javascript html arrays

Javascript 为什么赢了'；我的函数不能运行吗？,javascript,html,arrays,Javascript,Html,Arrays,这是我的HTML和JavaScript文件。html文件运行正常，但JavaScript文件中有一个错误，我想知道为什么会有错误，以及如何更正它。我正在尝试使用用户输入绘制一朵花 <DOCTYPE html> <html> <head> <title> Lab 8: Arrays </title> <meta charset = "UTF-8"/> <script src =

这是我的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>


实验8：阵列
花瓣数



点数

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

var N，M，r；
var-ctx；
var坐标；
var-arr=[]；
函数设置（）{
ctx=document.getElementById（“drawingSurface”）.getContext（“2d”）；
ctx.translate（300300）；
}
函数drawShape（）{
var numPetals=document.getElementById（“text1”）.value；
var numPoints=document.getElementById（“text2”）.value；
坐标=getCoordinates（numPetals，NumPoints，300）；
绘制（坐标）；
}
函数生成器（M，N，r）{
坐标=[[10,10]，[20,20]]；
对于（var i=0；i您的HTML单击处理程序：
<input id = "draw" input type ="button" value="Draw" onclick="draw()">

作为对代码的一般观察，函数内使用的变量应声明为局部变量，函数内有var
，如下所示：
var ctx = document.getElementById("drawingSurface").getContext("2d");

这可以防止多个函数因使用相同的全局变量而意外地相互碰撞，并防止对全局命名空间的污染。它还允许项目在不发生冲突的情况下进行缩放和共享。
getCoordinates（）在哪里

功能？在您向我们展示的代码中，

NumPoints

没有在任何地方定义。请不要在您的问题中编辑建议的修复-这不是本网站的工作方式。这会使您的问题成为移动的目标，并破坏其他人提供答案的有用性。您可以编辑您的问题以澄清其他人的问题不理解或不想添加更多的代码示例，但不想修复人们已经提供答案的东西。谢谢@jsfriend00，但它不会画出我的花，我想知道为什么？@donb-我知道你现在已经将我的答案编辑到了你的问题中。你为什么要这样做？你应该让问题保持原样，然后接受答案修复您的问题或对答案进行评论，如果它们不是全部修复。@donb-您现在遇到了什么错误？@jsfriend00，好的，我将撤消编辑，它不会给我任何错误，但是我的花仍然不会绘制。@donb-看起来您正在调用

draw（）

在多个位置，有时传递数组，有时不传递。我不知道您真正打算在那里做什么，但您必须保持一致。

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