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