Question

我在使用Javascript在HTML中使用Canvas元素绘制线条时遇到问题。

我以下列方式创建元素：

var canvasDiv = document.getElementById("canvasDiv");
var element = document.createElement("canvas");
canvasDiv.appendChild(element);
element.style.position = "absolute";
element.style.left = "0px";
element.style.top = "0px";
var ctx = element.getContext("2d");

并尝试以这种方式绘制：

ctx.beginPath();
ctx.moveTo(StartpunktX,StartpunktY);
ctx.lineTo(Knick1X,Knick1Y);
ctx.lineTo(Knick2X,Knick2Y);
ctx.stroke();

第一行被绘制（从moveTo语句到第一个lineTo语句）但是我错过了该行的第二部分。

执行lineTo（）时变量的值如下：
Knick1X：350
Knick1Y：50
Knick2X：350
Knick2Y：250

所以我应该得到一条水平线，然后从第一条线向下90°。

canvasDiv元素如下所示：

<div id="canvasDiv" style="position: relative;"></div>

Ty为你提供帮助

扬

Answer 1

您的代码没有任何内在错误。

这是一个实现：

var canvas = document.body.appendChild(document.createElement("canvas"));
var ctx = canvas.getContext("2d");
var StartpunktX = 20;
var StartpunktY = 20;
var Knick1X = 40;
var Knick1Y = 140;
var Knick2X = 10;
var Knick2Y = 40;
ctx.beginPath();
ctx.moveTo(StartpunktX, StartpunktY);
ctx.lineTo(Knick1X, Knick1Y);
ctx.lineTo(Knick2X, Knick2Y);
ctx.stroke();

Answer 2

如果更改Knick2X值，可以看到第二行：

var canvasDiv = document.getElementById("canvasDiv");
var element = document.createElement("canvas");
canvasDiv.appendChild(element);
element.style.position = "absolute";
element.style.left = "0px";
element.style.top = "0px";
var ctx = element.getContext("2d");

var StartpunktX = 0;
var StartpunktY = 0;
var Knick1X = 350;
var Knick1Y = 50;
var Knick2X = 35;
var Knick2Y = 250;

ctx.beginPath();
ctx.moveTo(StartpunktX, StartpunktY);
ctx.lineTo(Knick1X, Knick1Y);
ctx.lineTo(Knick2X, Knick2Y);
ctx.stroke();

<div id="canvasDiv" style="position: relative; border: 1px solid blue; height: 350px;width: 350px">
&nbsp;
</div>

在画布元素

2 个答案: