HTML5 Canvas线条未绘制

问题描述

顾名思义，我正在尝试在HTML5画布上画一条线.我已经测试了这些值，发现它将在0,0到1920,1040(客户区域的大小)之间画一条线，但不会为输入的任何其他值画一条线.我很确定这将是一个简单的错误，但是我还没有发现它，所以确实需要继续前进.谢谢您的帮助！

As the question suggests, I am trying to draw a line on a HTML5 canvas. I have tested the values and find that it WILL draw a line from 0,0 to 1920,1040 (the size of the client area) but will not for any other values entered. I'm pretty sure that it will be a simple mistake, but I have yet to spot it and really need to move on. Thank you for your help!

这是代码:

        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 )，则将其替换为硬编码整数似乎可行.

There must be something wrong with your LineStartX and LineStartY variables (Unable to test because you haven't provided CenterX and CenterY), replacing them with hard coded integers seems to work.

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/

这篇关于HTML5 Canvas线条未绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！