使用 JavaScript 在画布上绘图时改变线条颜色、alpha 和宽度

Question

我正在 Chrome 中对此进行测试。我尝试了 StackOverflow here 的线粗解决方案，但没有成功。

我有一个名为 redLine 的对象，它有一个位置和一个偏移位置数组。唯一受到影响的是 alpha 值。设置后颜色和线条粗细保持不变。

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

}

Answer 1

您需要在每个ctx.stroke() 之后调用ctx.beginPath()，否则，所有下一个lineTo() 将被添加到唯一的子路径中，并且当您再次调用stroke() 并使用更粗的线宽时，整个子路径将被重新绘制，覆盖之前绘制的细线。

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>