JavaScript CANVAS绘图LineTo函数错误

Question

问题1：绘制的路径不正确。 它以错误的尺寸绘制（无限长的矩形）。 该代码似乎很好。

问题2：如何将颜色合并到文本形式中以填充矩形？

HTML部分代码：

Color of OBJECT = <input type="text" name="clr" value="red"/><br/><br/>

Start Co-ordinates (x, y)= <input type="text" name="xco1" value="20"/> , <input type="text" name = "yco1" value = "20"/><br/><br/>

Dimensions (l x b) = <input type="text" name="length1" value="100"/> x <input type="text" name = "breadth1" value = "50"/><br/><br/>

<button onclick="drawRect()"><h3>Draw Rectangle</h3></button>

<button onclick="clearCanvas()"><h3">Clear Canvas</h3></button><br/><br/>


<canvas id="myCanvas" width="500" height="300" style="border:4px solid #000000;">

</canvas>

JavaScript部分代码：

function drawRect()
{
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    var colr = document.getElementsByName("clr")[0].value;

    var xcrd = document.getElementsByName("xco1")[0].value;
    var ycrd = document.getElementsByName("yco1")[0].value;
    var len = document.getElementsByName("length1")[0].value;
    var brd = document.getElementsByName("breadth1")[0].value;

    ctx.beginPath();

    ctx.moveTo(xcrd,ycrd);
    ctx.lineTo(xcrd+len,ycrd);
    ctx.lineTo(xcrd+len,ycrd+brd);
    ctx.lineTo(xcrd,ycrd+brd);

    ctx.closePath();
    ctx.fill();
}

Answer 1

这仅仅是因为它将所有从输入中获取的值都视为字符串。 您需要将它们转换为数字，例如通过使用parseInt ：

var xcrd = parseInt(document.getElementsByName("xco1")[0].value, 10);
var ycrd = parseInt(document.getElementsByName("yco1")[0].value, 10);
var len = parseInt(document.getElementsByName("length1")[0].value, 10);
var brd = parseInt(document.getElementsByName("breadth1")[0].value, 10);

当它们自己用作函数的参数时，它们会自动强制为数字。 但是，当您这样做时：

ctx.lineTo(xcrd+len,ycrd+brd);

在添加过程中，它们仍被视为字符串，因此它正在进行串联，因此该函数被称为：

ctx.lineTo("20"+"100","20"+"50");

最终以

ctx.lineTo("20100","2050");

这就是为什么您看到这么大的矩形。 这是解析数字的完整提琴 。

同样，仅出于完整性考虑，值得一提的是， 内置了用于绘制矩形的函数 ，以防万一您不知道。