Скорее всего бесконечный цикл
Написал скрипт рисования сетки в 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>
|
<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(parseInt(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>
|
Большое спасибо, помогло!
|
rangevalueGridSize.value=value <-- value в инпуте возвращается как строка
т.е. "grid = grid + gridSizeArg" это складывание строки достаточно просто указать что это число и все должно работать т.е. добавить --> «gridSizeArg = parseInt(gridSizeArg)» перед циклом |
Понял, прочитал про parseInt, раньше не знал. спасибо!
|
parseInt(num, 10) используйте всегда. Лишних три символа написать руки не отвалятся, а баги потом ловить удовольствия мало.
|
Вопрос другой появился. Необходимо написать функцию, которая будет убирать сетку. То есть не просто clearRect() или fillRect(). Нужно убрать только сетку, не затрагивая все остальное. Есть мысль все линии сетки из цикла прикрутить к какому-нибудь объекту, и у него изменить прозрачность. Вопрос в том, как линии привязать к объекту?
|
canvas - это холст на нем можно только рисовать (это поверхность для рисования просто набор пикселей)
т.е. из него удалить в принципе ничего невозможно можно только перерисовать его заново канвас не состоит из объектов это карта пикселей т.е. линий в твоем коде нет и получить их никак невозможно ты просто вызываешь функции которые изменяют пикселы канваса и на конвасе появляется нарисованные линии Сделай поверх этого канваса еще один прозрачный канвас и на нем уже рисуй линии тогда изменяя верхний канвас рисуя и удаляя линии на нем нижний канвас останется неизменным обычно в анимациях и сложных отоброжениях используют множество промежуточных изображений(спрайтов,канва сов) и используют функцию которая быстро собирает изображение из различных частей (рендер) |
Спасибо. Да, я уже посмотрел в сторону нескольких слоев. Есть одно "но", которое я не совсем понимаю.
Сетка=on. Верхний слой виден. Линии видны. Но прямоугольники между линиями тоже видны, а т.к. они находятся поверх других слоев, то они перекрывают всю картину. Вариант есть циклом пройтись и вырезать эти прямоугольники, но мне кажется это не есть хорошо для производительности, особенно если размер ячейки небольшой. А если сделать верхний слой прозрачным, то его не будет видно. Поправьте, пожалуйста. |
levshkatov, пиксили в канвасе в rgba, им можно задавать прозрачность.
|
| Часовой пояс GMT +3, время: 04:23. |