微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

编写代码以连接 HTML5 画布上的点

如何解决编写代码以连接 HTML5 画布上的点

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

是这样的:

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,1,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},y: 7},{x: 434,y: 54},{x: -4,[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>

如您所见,此代码并未在画布上绘制任何内容。为什么会这样,我该如何解决

感谢您的帮助。

解决方法

问题是下一个循环

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

> 必须是

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。