如何解决编写代码以连接 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 举报,一经查实,本站将立刻删除。