Question

如何获取输入的值并将其转换为网格方块的大小？当我使用输入值时，我的网格搞砸了，但是当我硬编码网格方块大小时它工作正常。

这是一个codepen：https://codepen.io/ryan_pixelers/pen/NbqKMQ

这是代码：

// get our canvas 
var grid = document.getElementById('grid');
hide(grid);

var horizontalSpace = 0;
var verticalSpace = 0;

var button = document.getElementById('gridControls');
button.onclick = drawCanvas;


function drawCanvas() {

show(grid);
var context = grid.getContext('2d');

// HERE: Why doesn't this work???
// var gridSize = document.getElementById('widthHeight').value;
var gridSize = 10;

// set the canvas style to positions absolute
// and set z-index high to keep it on top
grid.style.position = 'absolute';
grid.style.zIndex = '100000';

// get window width and height
var w = window.innerWidth;
var h = window.innerHeight;

// set the canvas width and height to be the window w/h
grid.width = w;
grid.height = h;

// create the horizontal lines
for(var horizontal = 0; horizontal < w; horizontal++) {
    context.beginPath();
    context.moveTo(0, horizontalSpace);
    context.lineTo(w, horizontalSpace);
    context.lineWidth = 1;
    context.strokeStyle = "lightblue";
    context.stroke();
    horizontalSpace += gridSize;
}

// create the vertical lines
for(var vertical = 0; vertical < h; vertical++) {
    context.beginPath();
    context.moveTo(verticalSpace, 0);
    context.lineTo(verticalSpace, h);
    context.lineWidth = 1;
    context.strokeStyle = "lightblue";
    context.stroke();
    verticalSpace += gridSize;
}

}

function hide(element) {
    element.style.display = 'none';
}

function show(element) {
    element.style.display = 'block';
}

尝试取消注释我尝试将gridSize设置为输入字段值的行并查看结果。它弄乱了网格空间！

知道如何解决这个问题吗？

谢谢！

Answer 1

好的，想通了：我需要在值上使用parseInt（）。

HTML5 Canvas Grid - 从输入中获取网格方块大小

1 个答案: