1

我希望将坐标从文本字段传递到 HTML5 画布。我正在使用下面的代码在画布上绘制一个矩形。坐标应该是0,0,50,50

function displayObject(currentObject){
    var imageNumber = $(currentObject).find('div.objectDd input.objectImageNum').val();
    var objectCoordinates = $(currentObject).find('div.objectDd input.objectCoordinates').val();
    var imageId = "";
    var canvasId = "";
    var context = "";
    var canvas = "";


    if(imageNumber != "" && objectCoordinates != ""){
        imageId = "#imgNum".concat(imageNumber);
        canvasId = $('#objectData').find('#miImages '+imageId+' .imageContainer canvas').attr("id");
        canvas = document.getElementById(canvasId);
        context = canvas.getContext("2d");
        context.fillStyle = "#FF0000";
        context.fillRect(objectCoordinates);
    }
}

我尝试将它们作为变量传递,objectCoordinates但未绘制矩形。

如何传递用户输入的坐标?

4

1 回答 1

1

现在,objectCoordinates 是一个字符串。您需要提取用户传入的数字:

var coordinateArray = objectCoordinates.split(",")

然后一一传入:

context.fillRect(coordinateArray[0],
                 coordinateArray[1],
                 coordinateArray[2],
                 coordinateArray[3])

此外,无需使用字符串初始化变量,尤其是像 canvas 和 context 这样最终根本不是字符串的变量。

于 2013-03-02T21:26:23.713 回答