Javascript HTML5画布线条未绘制

正如问题所暗示的，我正试图在HTML5画布上画一条线。我已经测试了这些值，发现它将在0,0到19201040（客户区的大小）之间画一条线，但对于输入的任何其他值都不会。我很确定这将是一个简单的错误，但我还没有发现它，我真的需要继续前进。谢谢你的帮助

        function DrawGrid() {
        var canvas = document.getElementById("Grid");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(872, 432);
        context.lineTo(1048, 432);
        context.strokeStyle = "#FF0000";
        context.lineWidth = 1;
        context.stroke();
        context.closePath();
    }

代码如下：

        function DrawGrid() {
        var canvas = document.getElementById("Grid");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(872, 432);
        context.lineTo(1048, 432);
        context.strokeStyle = "#FF0000";
        context.lineWidth = 1;
        context.stroke();
        context.closePath();
    }

---

您的

LineStartX

和

LineStartY

变量一定有问题（无法测试，因为您没有提供

CenterX

和

CenterY

），用硬编码整数替换它们似乎可行

        function DrawGrid() {
        var canvas = document.getElementById("Grid");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(872, 432);
        context.lineTo(1048, 432);
        context.strokeStyle = "#FF0000";
        context.lineWidth = 1;
        context.stroke();
        context.closePath();
    }

DrawGrid();

function DrawGrid() {
   var canvas = document.getElementById("Grid");
   var context = canvas.getContext("2d");

    //var LineStartX = CenterX - (width / 2);
   // var LineStartY = CenterY - (height / 2);

    context.beginPath();
    context.moveTo(10, 20);
    context.lineTo(100, 20);
    context.strokeStyle = "#FFAACC";
    context.lineWidth = 1;
    context.stroke();
}

---

我发现问题是由调用函数的位置引起的。

在哪里定义了

CenterX

和

CenterY

函数？在哪里调用函数？是什么导致了你的问题？？

        function DrawGrid() {
        var canvas = document.getElementById("Grid");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(872, 432);
        context.lineTo(1048, 432);
        context.strokeStyle = "#FF0000";
        context.lineWidth = 1;
        context.stroke();
        context.closePath();
    }