HTML5画布路径绘制问题

Question

我在尝试用画布画线时发现了一个奇怪的问题。我有一个简单的脚本，当你第一次点击时保存点（这将是路径的起点），当你再次点击并且第一个点已经保存时，它会保存终点。所以我有路径的起点和终点，这没关系。在此之后，我使用 .moveTo()、.lineTo() 和 .stroke() 函数来绘制一条线。这里出现了问题：X 坐标总是比原始坐标（起点和终点）多 1.4 倍，Y 坐标少​​ 0.8 倍。我不知道是什么导致了这个问题。我正在跟踪变量，它们工作正常，.moveTo() 和 .lineTo() 函数获得正确的坐标，但它们绘制了转换后的线。

这是我的代码：

var points = [null, null];
var canvas = $('canvas#myid');
var ctx = canvas[0].getContext("2d");
var end = false;

$(canvas).click(function(event) {
   if ( null == points[0] ) { 
      // First click - first coordinates
      points[0] = [event.pageX, event.pageY];
   } else if ( null == points[1] && null != points[0] ) {
      // Second click - second coordinates
      points[1] = [event.pageX, event.pageY];
      ctx.fillStyle = "black";
      ctx.moveTo(points[0][0], points[0][1]);
      ctx.lineTo(points[1][0], points[1][1]);
      ctx.stroke();
      end = true;
   } else if ( null != points[0] && null != points[1] ) end = true;

   if ( true === end ) {
      points = [null, null];
   }
}

我不知道，希望你们能帮助我，谢谢！

Answer 1

您忘记在代码末尾关闭括号 ); 并且不需要使用 $(canvas). 您应该像 canvas. 一样使用它

jsFiddle Live Demo

$(function()
{
    var points = [null, null];
    var canvas = $('canvas#myid');
    var ctx = canvas[0].getContext("2d");
    var end = false;
    canvas.click(function(event) 
    {
           if ( null == points[0] ) 
           { 
                  // First click - first coordinates
                  points[0] = [event.pageX, event.pageY];
           } 
           else if ( null == points[1] && null != points[0] ) 
           {
                  // Second click - second coordinates
                  points[1] = [event.pageX, event.pageY];
                  ctx.fillStyle = "black";
                  ctx.moveTo(points[0][0], points[0][1]);
                  ctx.lineTo(points[1][0], points[1][1]);
                  ctx.stroke();
                  end = true;
           } 
           else if ( null != points[0] && null != points[1] ) 
           {
                 end = true;
           }
           if ( true === end ) 
           {
                points = [null, null];
           }
    }); // Here you missed
});