个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我刚刚开始使用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>
最佳答案
您需要像这样获取 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
关于javascript - Fabric.js Draw_grid 无法读取未定义的属性 'moveTo'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30325915/
25
4
0
我刚刚开始使用fabric.js，我想绘制一个网格，我找到了这个函数，但是，我有错误:“无法读取未定义的属性'moveTo'，我想我不在正确的范围，也许我不确定......这是我的代码:
我有一个奇怪的问题。我该如何解决它。 编译器报告中的错误指出:“16|对 `rpg::draw_grid(int, int)' 的 undefined reference ” 我想知道你是否可以提供帮
我是一名优秀的程序员,十分优秀！