Изменяйте цвет линии, альфа и ширину при рисовании на холсте в JavaScript - PullRequest
Новая
       35

Изменяйте цвет линии, альфа и ширину при рисовании на холсте в JavaScript

0 голосов
/ 29 мая 2019

Я тестирую это в Chrome.Я пробовал решение по толщине линии из StackOverflow здесь , которое не сработало.

У меня есть объект с именем redLine с позицией и массивом позиций смещения.Единственное, что влияет на это альфа-значение.Цвет и толщина линии остаются после ее установки.

function renderRedLine(){

    context.beginPath();

    for(j=0; j<redLine.posArr.length; ++j){                 

        var startPoint 

        if(j===0){
            startPoint = redLine.pos
        }else{
            startPoint = redLine.posArr[j-1]
        }

        var endPoint = redLine.posArr[j]

        let alpha = 1.0 - (j/(redLine.posArr.length-1))

        let g = 150 - (10*j)

        context.strokeStyle = 'rgba(255, ' + g + ', ' + 0 + ', ' + alpha + ')'
        context.lineWidth = j+1

        if(j===0){
            context.moveTo(startPoint.x, startPoint.y);
        }else{
            context.lineTo(endPoint.x, endPoint.y);
        }

        context.stroke();

    }

    context.closePath();

}

1 Ответ

1 голос
/ 30 мая 2019

Вам нужно вызывать ctx.beginPath() после каждого ctx.stroke(), в противном случае все последующие lineTo() будут добавлены в один-единственный подпуть, а когда вы снова вызовете stroke() с более толстой строкойWidth, весь вспомогательный путь будет перерисован, охватывая более тонкие линии, которые были нарисованы ранее. 

const context = canvas.getContext('2d');
const redLine = {
  posArr: Array.from({
    length: 12
  }).map(() => ({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height
  })),
  pos: {
    x: canvas.width / 2,
    y: canvas.height / 2
  }
};
console.log(redLine);
renderRedLine();

function renderRedLine() {

  for (j = 0; j < redLine.posArr.length; ++j) {
    // at every iteration we start a new sub-path
    context.beginPath();

    let startPoint;
    if (j === 0) {
      startPoint = redLine.pos
    } else {
      startPoint = redLine.posArr[j - 1]
    }

    const endPoint = redLine.posArr[j]
    const alpha = 1.0 - (j / (redLine.posArr.length - 1))
    const g = 150 - (10 * j)

    context.strokeStyle = 'rgba(255, ' + g + ', ' + 0 + ', ' + alpha + ')'
    context.lineWidth = j + 1
    // since we start a new sub-path at every iteration
    // we need to moveTo(start) unconditionnaly
    context.moveTo(startPoint.x, startPoint.y);
    context.lineTo(endPoint.x, endPoint.y);

    context.stroke();
  }

  //context.closePath is only just a lineTo(path.lastMovedX, path.lastMovedY)
  // i.e not something you want here

}
<canvas id="canvas"></canvas>
...