JavaScriptCANVAS绘制LineTo函数错误

Question

问题一：绘制的路径不正确。它以错误的尺寸绘制（无限长矩形）。代码看起来不错。

问题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 用于绘制矩形，以防万一您不知道。

JavaScriptCANVAS绘制LineTo函数错误

JavaScript CANVAS drawing LineTo function error

javascript

canvas