编写代码以连接 HTML5 canvas 上的点

Question

我一直在尝试编写代码来连接 HTML5 canvas 上的点，但是当我使用我的函数时，canvas 上似乎什么也没有出现。我不确定为什么它不起作用。即使我给它输入我知道不应该成为问题的输入，它也不起作用。

是这样的：

var canvas = document.querySelector("#cnv-ex");

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

function drawLine(canvas, spt, ept, style, rotation) {
    var context = canvas.getContext('2d');
    context.beginPath();
    
    if (rotation != 0) {
        context.translate(spt.x, spt.y);
        context.rotate(rotation);
        context.translate(-spt.x, -spt.y);
    }
    
    context.strokeStyle = style;
    
    context.moveTo(spt.x, spt.y);
    context.lineTo(ept.x, ept.y);
    
    context.stroke();
    context.closePath();
    
    context.setTransform(1, 0, 0, 1, 0, 0);
}

function drawField(calculatedFields) {
  for (var i = 0; i < calculatedFields.length; i++) {
    var pair = calculatedFields[i];
            
    var start = new Point(calculatedFields[i][1][0].x, calculatedFields[i][1][0].y);
    var end;
            
    var stroke = "purple";
            
    for (var j = 0; j > pair[1].length; j++) {
      if (j != pair[1].length - 1) end = pair[1][j + 1];
      else break;
                
      drawLine(canvas,
        start,
        end,
        stroke,
        0);
                    
      start = end;
     }
   }
}

//sample input: (includes some points off the canvas, because that sometimes occurs when it is used with the rest of the program)
const fields = [
  [3, [
      {x: 3, y: 3},
      {x: 3, y: 5},
      {x: 4, y: 6},
      {x: 5, y: 8}
    ]
  ],
  [9, [
      {x: 7, y: 8},
      {x: 5, y: 7},
      {x: 434, y: 54},
      {x: -4, y: 8}
    ]
  ],
  [6, [
      {x: 46, y: 36},
      {x: 565, y: 55},
      {x: 435, y: 401},
      {x: 234, y: 24}
    ]
  ]
];

drawField(fields);

#cnv-ex {
  border: 2px solid black;
}

<!DOCTYPE html>
<html>
  <head>
  
  </head>
  <body>
    <canvas width="600" height="400" id="cnv-ex">
    </canvas>
  </body>
</html>

如您所见，此代码未在 canvas 上绘制任何内容。为什么会这样，我该如何解决？

感谢您的帮助。

Answer 1

问题是下一个循环

for (var j = 0; j > pair[1].length; j++) {

> 必须是 <

编写代码以连接 HTML5 canvas 上的点

Writing code to connect points on the HTML5 canvas

html

javascript

html5-canvas