Два ручки на одном холсте в одном цикле?

Question

Этот код создает линию, которая была разорвана между двумя ручками, например, если вы пытались писать на бумаге, пока я хватаю перо и заставляю вас писать что-то, что я хочу.

var pen=[]; 
pen[0]=$('#canvas')[0].getContext("2d"); 
pen[1]=$('#canvas')[0].getContext("2d"); 
pen[0].beginPath(); 
pen[1].beginPath(); 
var y=[[],[]];  // two arrays of pixel values, numbers between 0-100 
var x=0; 
var i=y[0].length; // the arrays are both the same length 
pen[0].moveTo(x,y[0][y[0].length-1]); 
pen[1].moveTo(x,y[1][y[1].length-1]); 
while(i--){ 
    x+=2; 
    pen[0].lineTo(x,y[0][i]); 
    pen[1].lineTo(x,y[1][i]); 
    } 
pen[0].stroke(); 
pen[1].stroke(); 

Или лучше сказано; если первый массив повторял только число 100, а второй массив повторялся только 0. Я ожидал бы, что две линии будут вырисовываться параллельно, но вместо этого я получаю зигзаг.

Есть ли способ использовать один холст и один цикл и получить две отдельные строки?

Answer 1

Там только один контекст на холсте - Я просто проверял в Chrome 39:

var c = document.createElement('canvas'); 
var x1 = c.getContext('2d'); 
var x2 = c.getContext('2d'); 
x1 === x2; // true 

Хотя это может быть сделано в одном цикле, если вы делаете отдельную moveTo и lineTo для каждого сегмента линии в цикл (т.е. `moveTo previousPoint, lineTo thisPoint), вы обнаружите, что для достижения наилучших результатов вам нужно использовать две петли.

Причина в том, что Canvas знает, как чисто соединяться с соседними сегментами линии, но только если они являются частью одного пути. Если вы создадите новый путь для каждого сегмента, линии не будут правильно соединяться.

Answer 2

Я думаю, проблема в том, что $ ('# canvas') [0] .getContext («2d») возвращает только указатель на объект контекста canvas, так что действительно, это тот же самый объект, когда вы его получите для пера 0 и ручки 1.

Вероятно, именно поэтому вы получаете зигзаг - он рисует линию от последнего нарисованного пикселя на этом Контексте до вашего нового положения.

Чтобы нарисовать две линии, вам нужно будет использовать moveTo (x, y) для перемещения пера (указатель на контекст) без рисования при перестановке из одной строки в другую. Потому что есть только один объект контекста, я не думаю, что два ручка будут работать, я боюсь.