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");

这就是为什么你会看到这么大的矩形。 Here's a complete fiddle，其中包含解析数字。

另外，为了完整起见，值得一提的是绘制矩形有built in functions，以防你不知道。