在画布元素中绘制连续线答案

【问题标题】：Drawing a continous line in a canvas Element在画布元素中绘制连续线
【发布时间】：2018-02-07 22:08:36
【问题描述】：

我在使用 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
尼克1Y：50
Knick2X：350
Knick2Y：250

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

canvasDiv 元素如下所示：

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

求你的帮助

一月

【问题讨论】：

生成的画布不够大，无法看到第二行。在画布上设置大于 350 像素的宽度。
Ty 修复了它

标签： javascript html canvas

【解决方案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();

【讨论】：

你的脚本工作起来就像它的inteded，但不知何故我们仍然没有。

【解决方案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>

【讨论】：