Fabric.js Draw_grid 无法读取未定义的属性“moveTo”答案

【问题标题】：Fabric.js Draw_grid Cannot read property 'moveTo' of undefinedFabric.js Draw_grid 无法读取未定义的属性“moveTo”
【发布时间】：2015-05-19 21:02:21
【问题描述】：

我刚开始使用fabric.js，我想绘制一个网格我找到了这个函数但是，我有错误：“无法读取未定义的属性'moveTo'，我想我不在正确的范围，也许我不确定...... 这是我的代码：

<html>
<head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js'></script>

</head>

<body>
   <canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>


    <script>
        var canvas = new fabric.Canvas('canvas');
        canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));

        canvas.selectionColor = 'rgba(0,255,0,0.3)';
        canvas.selectionBorderColor = 'red';
        canvas.selectionLineWidth = 5;
        draw_grid(100);
//this is the function I found

function draw_grid(grid_size) {

  grid_size || (grid_size = 25);
  currentCanvasWidth = canvas.getWidth();
  currentcanvasHeight = canvas.getHeight();

  // Drawing vertical lines
  var x=0;
  for (x = 0; x <= currentCanvasWidth; x += grid_size) {
      this.grid_context.moveTo(x + 0.5, 0);
      this.grid_context.lineTo(x + 0.5, currentCanvasHeight);
  }

  // Drawing horizontal lines
      var y;
      for (y = 0; y <= currentCanvasHeight; y += grid_size) {
      this.grid_context.moveTo(0, y + 0.5);
      this.grid_context.lineTo(currentCanvasWidth, y + 0.5);
  }

  grid_size = grid_size;
  this.grid_context.strokeStyle = "black";
  this.grid_context.stroke();
}

</script>
</body>
</html>

【问题讨论】：

标签： javascript html canvas fabricjs

【解决方案1】：

你需要得到context 像这样var context = canvas.getContext("2d"); 也有一个错字currentcanvasHeight 它应该是currentCanvasHeight，因为你在下面使用它。无论如何，这是工作代码

var canvas = new fabric.Canvas('canvas');

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
draw_grid(100);

function draw_grid(grid_size) {
    var context = canvas.getContext("2d");
    grid_size || (grid_size = 25);
    var currentCanvasWidth = canvas.getWidth();
    var currentCanvasHeight = canvas.getHeight();

    // Drawing vertical lines
    var x=0;
    for (x = 0; x <= currentCanvasWidth; x += grid_size) {
        context.moveTo(x + 0.5, 0);
        context.lineTo(x + 0.5, currentCanvasHeight);
    }

    // Drawing horizontal lines
    var y;
    for (y = 0; y <= currentCanvasHeight; y += grid_size) {
        context.moveTo(0, y + 0.5);
        context.lineTo(currentCanvasWidth, y + 0.5);
    }

    grid_size = grid_size;
    context.strokeStyle = "black";
    context.stroke();
}

FIDDLE

【讨论】：