Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Canvas не рисует линии (https://javascript.ru/forum/dom-window/65056-canvas-ne-risuet-linii.html)

Dmitriy_14 22.09.2016 17:41

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

Помогите плиз :help:

Rise 22.09.2016 17:47

Dmitriy_14, цикл с массивом покажи...

Dmitriy_14 22.09.2016 18:00

Вот:

Код:

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;


Coriolan161 22.09.2016 18:05

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

Надо:
context.lineTo(masXX[i],masYY[i]);

Dmitriy_14 22.09.2016 18:09

Цитата:

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

Надо:
context.lineTo(masXX[i],masYY[i]);

Нет, здесь все правильно (линии рисуются из точки, где предыдущая линия была), но попробовал, как вы написали, все-равно не рисует.

Coriolan161 22.09.2016 18:14

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();

Coriolan161 22.09.2016 18:20

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

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

 Ну короче в таком ключе

Dmitriy_14 22.09.2016 18:50

Цитата:

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

Да, делаю рисовалку дерева DOM, для красоты линии к блокам.
Спасибо большое за совет!

warren buffet 24.09.2016 13:49

Цитата:

Сообщение от Dmitriy_14
context.stroke();

Так у тебя рисование снаружи цикла.

Какие еще точки? Две координаты, "двумерный" массив, берешь по токену и рисуешь. Запутали сами себя в трех соснах.

Coriolan161 25.09.2016 00:03

warren buffet,
Цитата:

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


Часовой пояс GMT +3, время: 13:10.