MoveTo画一条线？

Question

<script>

function myFunction2() {


side1 = prompt("Enter the X axis of the bottom side")

side2 = prompt("Enter the X axis of the left side")

side3 = prompt("Enter the X axis of the right side")



var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0, 200);

context.lineTo(side1, 200);
context.stroke();
context.lineTo(side2, 100);
context.stroke();
context.lineTo(side3, 200);
context.stroke();
context.closePath();

}

</script>

我正在尝试制作一个三角形，以便用户可以输入边长，但这不起作用。我做错了什么？

Answer 1

context.moveTo(0, 200); 将您的 'pen'（起点）移动到 0, 200，这将成为您第一行的起点。您的第一行 在 side1, 200 处结束 。这可能不是你想要的。

像这样重写你的代码：

context.beginPath();

context.moveTo(side1, 200); // Start point for line 1
context.lineTo(side2, 100); // End point for line 1, start for line 2
context.stroke();
context.lineTo(side3, 200); // End point for line 2, start for line 3
context.stroke();
context.lineTo(side1, 200); // End point for line 3, back where we started
context.stroke();
context.closePath();

MoveTo画一条线？

MoveTo drawing a line?

javascript

drawing