Fabric.js Draw_grid 无法读取未定义的属性 'moveTo'

Question

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

<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>

Answer 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

Fabric.js Draw_grid 无法读取未定义的属性 'moveTo'

Fabric.js Draw_grid Cannot read property 'moveTo' of undefined

html

javascript

canvas

fabricjs

Fabric.js Draw_grid 无法读取未定义的 属性 'moveTo'

Fabric.js Draw_grid Cannot read property 'moveTo' of undefined

html

javascript

canvas

fabricjs

Fabric.js Draw_grid 无法读取未定义的属性 'moveTo'