Question

对于大学项目我需要做一个简单的Mandala生成器。我想使用此示例http://jsfiddle.net/66ywh9f4/

这是代码：

    <!DOCTYPE html>
<html>
  <head>
    Points: <input type='range' min='3' max='40' id='points' value='13' /><br />
    <canvas id='canvas' width='400' height='400' />
  </head>

  <body>
    <script src="sketch.js"></script>
  </body>
</html>

和js

   var points = []
    for (var i = 0; i <= point_count; i++) {
        angle = i * 2 * Math.PI / point_count - Math.PI / 2;
        points.push({
            'x': radius + radius * Math.cos(angle),
            'y': radius + radius * Math.sin(angle)
        })
    }

    ctx.clearRect(0, 0, canv.width, canv.height);
    ctx.beginPath();
    ctx.lineWidth = 1;

    for(var i = 0; i < points.length; i++) {
        for(var j = 0; j < points.length; j++) {
            ctx.moveTo(points[i].x, points[i].y);
            ctx.lineTo(points[j].x, points[j].y);
        }
    }
    ctx.stroke();
**}**

function draw() {
    drawShape(contx, document.getElementById('points').value, canv.width / 2);
}
draw();

但是当我运行它时，它显示：第19行的Uncaught SyntaxError：Unexpected token}

Answer 1

如果您不想要其他函数调用，则必须执行此操作。我根据你的回答改变了小提琴。

＆＃13;

var canv = document.getElementById('canvas');
var contx = canv.getContext('2d');

function draw() {
    var ctx = contx;
    var point_count = document.getElementById('points').value;
    var radius = canv.width / 2;
     var points = []
    for (var i = 0; i <= point_count; i++) {
        angle = i * 2 * Math.PI / point_count - Math.PI / 2;
        points.push({
            'x': radius + radius * Math.cos(angle),
            'y': radius + radius * Math.sin(angle)
        });
    }
    ctx.clearRect(0, 0, canv.width, canv.height);
    ctx.beginPath();
    ctx.lineWidth = 1;
    for(var i = 0; i < points.length; i++) {
        for(var j = 0; j < points.length; j++) {
            ctx.moveTo(points[i].x, points[i].y);
            ctx.lineTo(points[j].x, points[j].y);
        }
    }
    ctx.stroke();
}
draw();
document.getElementById('points').oninput = draw;

＆＃13;

<html>
  <head>
    Points: <input type='range' min='3' max='40' id='points' value='13' /><br />
    <canvas id='canvas' width='400' height='400' />
  </head>

  <body>
    <script src="sketch.js"></script>
  </body>
</html>

＆＃13;

ctx.stroke（）之后你有额外的}大括号;并且你缺少使其运作所必需的contx和func。

  var points = []
    for (var i = 0; i <= point_count; i++) {
        angle = i * 2 * Math.PI / point_count - Math.PI / 2;
        points.push({
            'x': radius + radius * Math.cos(angle),
            'y': radius + radius * Math.sin(angle)
        })
    }

    ctx.clearRect(0, 0, canv.width, canv.height);
    ctx.beginPath();
    ctx.lineWidth = 1;

    for(var i = 0; i < points.length; i++) {
        for(var j = 0; j < points.length; j++) {
            ctx.moveTo(points[i].x, points[i].y);
            ctx.lineTo(points[j].x, points[j].y);
        }
    }
    ctx.stroke();

//} <-REMOVE THIS

    function draw() {
//      THIS WONT WORK IT DOESN'T EXISTS ->  drawShape(contx, document.getElementById('points').value, canv.width / 2);
    }
    draw();

简单的曼荼罗生成器JS

1 个答案: