Question

我希望将文本字段中的坐标传递给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传递，但未绘制矩形。

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

Answer 1

现在，objectCoordinates是一个字符串。您需要提取用户传递的数字：

var coordinateArray = objectCoordinates.split(",")

然后一个接一个地传递它们：

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

此外，不需要使用字符串初始化变量，特别是像canvas和context这样的变量最终不是字符串。

将值从文本字段传递到HTML画布

1 个答案: