Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.10.2009, 15:40
Аспирант
Отправить личное сообщение для neurostep Посмотреть профиль Найти все сообщения от neurostep
 
Регистрация: 10.04.2008
Сообщений: 83

Canvas (разный цвет линий)
Здравствуйте всем. Ситуация такая. Есть 2 массива, содержащие объекты DOM. Мне нужно их соединить линиями. Лини, в зависимости от условия, должны быть разного цвета. Все хорошо соединяет, только цветом отрисовывает только одним. Помогите пожалуйста разобраться, что не так:

var canvas = document.getElementById('field');
		var ctx = canvas.getContext("2d");
		var elem_error, before_error;
		ctx.beginPath();
		ctx.lineWidth = 1;
		for(var i=0; i<array0.length; i++) {
			if(array0[i].node_type == 'active') {
				//ctx.clearRect(array0[i].x2, array0[i].y2, 1000, 1000);
				ctx.fillStyle = "#00a83c";
				ctx.strokeStyle = "#00a83c";
			}else if(array0[i].node_type != 'active') {
				ctx.fillStyle = "#138CCB";
				ctx.strokeStyle = "#138CCB";
			}
			for(var j=0; j<array1.length; j++) {
				if(!array0[i].is_error && !array1[j].is_error) {
					if(array0[i].node_ip.test(array1[j].node_ip)) {
						ctx.save();
						ctx.moveTo(array0[i].x2, array0[i].y2);
						ctx.lineTo(array1[j].x1, array1[j].y1);
						ctx.restore();
						ctx.save();
						ctx.translate(array1[j].x1, array1[j].y1);
						if(array1[j].x1 != array0[i].x1) {
							var a, b, sinus, cosinus, tangens, alpha;
							a = array1[j].y1 - array0[i].y2;
							b = array1[j].x1 - array0[i].x2;
							tangens = Math.tan(b/a);
							alpha = Math.atan(tangens);
							//alert(alpha);
							ctx.rotate(alpha);
						}
						ctx.moveTo(0, 0);
						ctx.lineTo(-2, -6);
						ctx.lineTo(2, -6);
						ctx.lineTo(0, 0);
						ctx.restore();
					}
				
				}else{
					elem_error = array0[i];
					before_error = array1[j];
				}
			}
		}
		//alert(before_error.node_level);
		ctx.stroke();
		ctx.fill();
		ctx.closePath();


Отрисовывает только цветом #138CCB.
Пробовал clearRect - не получается ((
Ответить с цитированием
  #2 (permalink)  
Старый 26.10.2009, 15:47
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Может перед каждой сменой цвета нужно вызывать ctx.stroke();
Ответить с цитированием
  #3 (permalink)  
Старый 26.10.2009, 16:23
Аспирант
Отправить личное сообщение для neurostep Посмотреть профиль Найти все сообщения от neurostep
 
Регистрация: 10.04.2008
Сообщений: 83

Спасибо! Практически так. Надо было beginPath() начинать в итерации второго массива =)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему в Опере не действует заданный цвет границ таблицы? alex-v (X)HTML/CSS 3 20.08.2009 15:29
цвет кнопки, цвет текста на кнопке, всплывающее окно matana Общие вопросы Javascript 8 26.05.2009 17:08
поменять цвет у нескольких строк в таблице Root Элементы интерфейса 4 21.04.2008 10:30