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.一样使用它{
1} {3}}

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

HTML5画布路径绘图问题

1 个答案: