Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.09.2016, 17:41
Новичок на форуме
Отправить личное сообщение для Dmitriy_14 Посмотреть профиль Найти все сообщения от Dmitriy_14
 
Регистрация: 22.09.2016
Сообщений: 4

Canvas не рисует линии
Ребята, помогите плиз. Новичок в JS, туплю...

рисую в цикле линии в Canvas, координаты линий находятся в числовом массиве. Почему-то, вот такое линии рисует:
Код:
context.moveTo(0, 50);
context.lineTo(100, 50);
а если передаю в качестве координат массив, то ничего не рисуется:
Код:
context.moveTo(masXX[i-1],masYY[i-1]);
context.lineTo(masXX[i-1],masYY[i]);
массив числовой. typeof выдает number

Помогите плиз
Ответить с цитированием
  #2 (permalink)  
Старый 22.09.2016, 17:47
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Dmitriy_14, цикл с массивом покажи...
Ответить с цитированием
  #3 (permalink)  
Старый 22.09.2016, 18:00
Новичок на форуме
Отправить личное сообщение для Dmitriy_14 Посмотреть профиль Найти все сообщения от Dmitriy_14
 
Регистрация: 22.09.2016
Сообщений: 4

Вот:

Код:
var a_canvas = doc.document.getElementById("a");   
var context = a_canvas.getContext("2d");
context.strokeStyle = "#000000";  
context.beginPath();
for (var i=0; i<nodecount;i++)
{
if (i>0)
{  
context.moveTo(masXX[i-1],masYY[i-1]);
context.lineTo(masXX[i-1],masYY[i]);    
context.moveTo(masXX[i-1],masYY[i]);
context.lineTo(masXX[i],masYY[i]);
}
}
context.stroke();
А массив заполняется в другой функции (x и y числа):
Код:
masXX[nodecount] = x+40;
masYY[nodecount] = y+40;
Ответить с цитированием
  #4 (permalink)  
Старый 22.09.2016, 18:05
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

Dmitriy_14,
Новичок в JS, проблема у тебя в индексе.
Вместо:
context.lineTo(masXX[i-1],masYY[i]);

Надо:
context.lineTo(masXX[i],masYY[i]);
Ответить с цитированием
  #5 (permalink)  
Старый 22.09.2016, 18:09
Новичок на форуме
Отправить личное сообщение для Dmitriy_14 Посмотреть профиль Найти все сообщения от Dmitriy_14
 
Регистрация: 22.09.2016
Сообщений: 4

Сообщение от Coriolan161 Посмотреть сообщение
Dmitriy_14,
Новичок в JS, проблема у тебя в индексе.
Вместо:
context.lineTo(masXX[i-1],masYY[i]);

Надо:
context.lineTo(masXX[i],masYY[i]);
Нет, здесь все правильно (линии рисуются из точки, где предыдущая линия была), но попробовал, как вы написали, все-равно не рисует.
Ответить с цитированием
  #6 (permalink)  
Старый 22.09.2016, 18:14
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

Dmitriy_14,
Ты что лестницу рисуешь?
У меня прокатило
var canvas = document.getElementById('canvas2');
    var context = canvas.getContext('2d');
    var XX = [0, 40, 80, 120, 160, 200, 240, 280, 320];
    var YY = [0, 40, 80, 120, 160, 200, 240, 280, 320];

    context.beginPath();

    var i = -1;
    while (++i < XX.length) {
      context.moveTo(XX[i], YY[i]);
      context.lineTo(XX[i], YY[i + 1]);
      context.moveTo(XX[i], YY[i + 1]);
      context.lineTo(XX[i + 1], YY[i + 1]);
    };
    context.stroke();
Ответить с цитированием
  #7 (permalink)  
Старый 22.09.2016, 18:20
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

Dmitriy_14,
Но это НЕ есть хорошо два массива координат иметь. Потому что можно где-то что-то недоглядеть
Лучше ты это..того..класс точек сделай и пихай объект-точку в массив

function Point(x, y) {
         var point = {};
         point.posX = x;
         point.posY = y;
         return point;
      }
 var myPoints = [];
 /*....*/
 myPoints.push(new Point(0, 0));

 Ну короче в таком ключе
Ответить с цитированием
  #8 (permalink)  
Старый 22.09.2016, 18:50
Новичок на форуме
Отправить личное сообщение для Dmitriy_14 Посмотреть профиль Найти все сообщения от Dmitriy_14
 
Регистрация: 22.09.2016
Сообщений: 4

Сообщение от Coriolan161 Посмотреть сообщение
Dmitriy_14,
Но это НЕ есть хорошо два массива координат иметь. Потому что можно где-то что-то недоглядеть
Лучше ты это..того..класс точек сделай и пихай объект-точку в массив
Да, делаю рисовалку дерева DOM, для красоты линии к блокам.
Спасибо большое за совет!
Ответить с цитированием
  #9 (permalink)  
Старый 24.09.2016, 13:49
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от Dmitriy_14
context.stroke();
Так у тебя рисование снаружи цикла.

Какие еще точки? Две координаты, "двумерный" массив, берешь по токену и рисуешь. Запутали сами себя в трех соснах.
Ответить с цитированием
  #10 (permalink)  
Старый 25.09.2016, 00:03
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

warren buffet,
Цитата:
Так у тебя рисование снаружи цикла
context.stroke() делает обозначенные контуры видимыми. "Рисуется" всё в цикле
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удаление линии с Canvas vaddd Элементы интерфейса 2 25.02.2016 03:11
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
Отрисовка спирали. Canvas. Moonshell Javascript под браузер 3 27.01.2014 19:33
Рисование линии на CANVAS essere Элементы интерфейса 16 31.07.2013 18:17
canvas - нарисовать линии Valentinka_1 Общие вопросы Javascript 1 09.05.2013 21:51