HTML5画布线不绘图

时间:2013-09-25 14:35:09

标签: javascript html5 canvas

正如问题所示,我试图在HTML5画布上画一条线。我测试了这些值并发现它将从0,0到1920,1040(客户区的大小)绘制一条线,但不会输入任何其他值。我很确定这将是一个简单的错误,但我还没有发现它,真的需要继续前进。谢谢你的帮助!

以下是代码:

        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();
    }

2 个答案:

答案 0 :(得分:2)

您的LineStartXLineStartY变量一定有问题(无法测试,因为您没有提供CenterXCenterY),请使用硬编码替换它们整数似乎有效。

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();
}

http://jsfiddle.net/4Mf8C/

答案 1 :(得分:0)

我发现问题是由我调用函数的地方引起的。