Написал скрипт рисования сетки в canvas. Пользователь выбирает значение ползунком, это значение передается в функцию рисования сетки. значение - размер клетки. Только вся эта штука не работает, т.к. скорее всего получается бесконечный цикл при нажатии на кнопку. В чем проблема?
<html>
<head>
<style>
body {
margin: 0;
}
</style>
<canvas id='draw' width='600' height='400' style='border:1px solid'></canvas>
<script type='text/javascript'>
window.onload = function(e){
var canvas=document.getElementById("draw");
var can=canvas.getContext("2d");
function gridF(){
gridSize(rangevalueGridSize.value);
}
function gridSize(gridSizeArg){
for (var grid = 0.5; grid < 600; grid = grid + gridSizeArg) { //если заменить gridSizeArg на число, напр 10, то все работает
can.moveTo(grid, 0);
can.lineTo(grid, 400);
can.strokeStyle = "rgb(200,200,200)";
can.stroke();
}
for (var grid1 = 0.5; grid1 < 400; grid1 = grid1 + gridSizeArg) { //если заменить gridSizeArg на число, напр 10, то все работает
can.moveTo(0, grid1);
can.lineTo(600, grid1);
can.strokeStyle = "rgb(200,200,200)";
can.stroke();
}
}
document.getElementById("grid").onclick = gridF;
}
</script>
<title>
</title>
</head>
<body>
<br>
<table border="0">
<tr>
<td><button id="grid">Сетка</button></td>
<td>
<input type="range" min="0" max="100" value="50" step="1" onchange="rangevalueGridSize.value=value" />
<output id="rangevalueGridSize">50</output>
</td>
</tr>
</table>
</body>
</html>