08.09.2014, 14:00
|
|
Аспирант
|
|
Регистрация: 03.09.2014
Сообщений: 61
|
|
|
Скорее всего бесконечный цикл
Написал скрипт рисования сетки в 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>
|
|
08.09.2014, 14:07
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
<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>
|
|
08.09.2014, 14:09
|
|
Аспирант
|
|
Регистрация: 03.09.2014
Сообщений: 61
|
|
|
Большое спасибо, помогло!
|
|
08.09.2014, 14:23
|
 |
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
|
rangevalueGridSize.value=value <-- value в инпуте возвращается как строка
т.е. "grid = grid + gridSizeArg" это складывание строки
достаточно просто указать что это число и все должно работать
т.е. добавить --> «gridSizeArg = parseInt(gridSizeArg)» перед циклом
|
|
08.09.2014, 14:53
|
|
Аспирант
|
|
Регистрация: 03.09.2014
Сообщений: 61
|
|
|
Понял, прочитал про parseInt, раньше не знал. спасибо!
|
|
08.09.2014, 14:58
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,589
|
|
|
parseInt(num, 10) используйте всегда. Лишних три символа написать руки не отвалятся, а баги потом ловить удовольствия мало.
__________________
29375, 35
|
|
08.09.2014, 14:58
|
|
Аспирант
|
|
Регистрация: 03.09.2014
Сообщений: 61
|
|
|
Вопрос другой появился. Необходимо написать функцию, которая будет убирать сетку. То есть не просто clearRect() или fillRect(). Нужно убрать только сетку, не затрагивая все остальное. Есть мысль все линии сетки из цикла прикрутить к какому-нибудь объекту, и у него изменить прозрачность. Вопрос в том, как линии привязать к объекту?
|
|
08.09.2014, 15:29
|
|
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
|
canvas - это холст на нем можно только рисовать (это поверхность для рисования просто набор пикселей)
т.е. из него удалить в принципе ничего невозможно можно только перерисовать его заново
канвас не состоит из объектов это карта пикселей
т.е. линий в твоем коде нет и получить их никак невозможно
ты просто вызываешь функции которые изменяют пикселы канваса и на конвасе появляется нарисованные линии
Сделай поверх этого канваса еще один прозрачный канвас и на нем уже рисуй линии тогда изменяя верхний канвас рисуя и удаляя линии на нем нижний канвас останется неизменным
обычно в анимациях и сложных отоброжениях используют множество промежуточных изображений(спрайтов,канва сов) и используют функцию которая быстро собирает изображение из различных частей (рендер)
Последний раз редактировалось MallSerg, 08.09.2014 в 16:26.
|
|
08.09.2014, 15:38
|
|
Аспирант
|
|
Регистрация: 03.09.2014
Сообщений: 61
|
|
|
Спасибо. Да, я уже посмотрел в сторону нескольких слоев. Есть одно "но", которое я не совсем понимаю.
Сетка=on. Верхний слой виден. Линии видны. Но прямоугольники между линиями тоже видны, а т.к. они находятся поверх других слоев, то они перекрывают всю картину. Вариант есть циклом пройтись и вырезать эти прямоугольники, но мне кажется это не есть хорошо для производительности, особенно если размер ячейки небольшой.
А если сделать верхний слой прозрачным, то его не будет видно.
Поправьте, пожалуйста.
|
|
08.09.2014, 16:22
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,589
|
|
|
levshkatov, пиксили в канвасе в rgba, им можно задавать прозрачность.
__________________
29375, 35
|
|
|
|
