javascript - 如何重置 Canvas 路径样式？

Question

我创建了一些函数来绘制 Canvas 形状和线条，如下面的代码:

    function drawBaseline(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor) {
        ctx.beginPath();
        ctx.lineWidth   = strockWidth;
        ctx.strokeStyle = strockColor;
        ctx.moveTo(lineLeft, lineTop);
        ctx.lineTo(lineEndLeft, lineTop);
        ctx.stroke();
    }

    function drawDashedLine(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor, lineDash) {
        ctx.beginPath();
        ctx.setLineDash(lineDash);
        ctx.lineCap = 'round';
        ctx.moveTo(lineLeft, lineTop);
        ctx.lineWidth   = strockWidth;
        ctx.strokeStyle = strockColor;
        ctx.lineTo(lineEndLeft, lineTop);
        ctx.stroke();
    }

但是当我在 drawDashedLine 之后调用 drawBaseline 时，也会绘制虚线。

    drawDashedLine(ctx, 0, lineTop, 300, 5, 'red', [5, 20]);
    drawBaseline(ctx, 0, lineTop, canvas.width, 1, 'black');

如何重置上下文以绘制新对象？

Answer 1

慢但懒的方法是调用 ctx.save()在设置路径样式之前 ctx.restore()当你完成时。

但这将保存上下文的所有属性，可能还有很多你没有触及的属性(fillStyle、StrokeStyle、transformation -矩阵、剪切区域、globalAlpha、gCO、dashOffset、lineCap、字体、文本对齐...:全部)。
此外，如果出于某种原因您忘记在 save() 之后调用 restore()，保存的状态将累积在内存中，这是不好的。

function drawBaseline(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor) {
  ctx.save();
  ctx.beginPath();
  ctx.lineWidth = strockWidth;
  ctx.strokeStyle = strockColor;
  ctx.moveTo(lineLeft, lineTop);
  ctx.lineTo(lineEndLeft, lineTop);
  ctx.stroke();
  // now restore all properties
  ctx.restore();
}

function drawDashedLine(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor, lineDash) {
  ctx.save();
  ctx.beginPath();
  ctx.setLineDash(lineDash);
  ctx.lineCap = 'round';
  ctx.moveTo(lineLeft, lineTop);
  ctx.lineWidth = strockWidth;
  ctx.strokeStyle = strockColor;
  ctx.lineTo(lineEndLeft, lineTop);
  ctx.stroke();
  // now restore all properties
  ctx.restore();
}

var ctx = canvas.getContext('2d');
var lineTop = 100;

drawDashedLine(ctx, 0, lineTop, 300, 5, 'red', [5, 20]);
drawBaseline(ctx, 0, lineTop, canvas.width, 1, 'black');

<canvas id="canvas"></canvas>

建议的方法是将您修改的每个属性设置回默认值。
(在您的情况下 ctx.linesStyle ="#000"; ctx.lineWidth=1; ctx.setLineDash([]);)

function drawBaseline(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor) {
  ctx.beginPath();
  ctx.lineWidth = strockWidth;
  ctx.strokeStyle = strockColor;
  ctx.moveTo(lineLeft, lineTop);
  ctx.lineTo(lineEndLeft, lineTop);
  ctx.stroke();
  // now reset all set properties to their defaults
  ctx.lineWidth = 1;
  ctx.strokeStyle = '#000';
}

function drawDashedLine(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor, lineDash) {
  ctx.beginPath();
  ctx.setLineDash(lineDash);
  ctx.lineCap = 'round';
  ctx.moveTo(lineLeft, lineTop);
  ctx.lineWidth = strockWidth;
  ctx.strokeStyle = strockColor;
  ctx.lineTo(lineEndLeft, lineTop);
  ctx.stroke();
  // now reset all set properties to their defaults
  ctx.lineWidth = 1;
  ctx.strokeStyle = '#000';
  ctx.setLineDash([]);
}

var ctx = canvas.getContext('2d');
var lineTop = 100;

drawDashedLine(ctx, 0, lineTop, 300, 5, 'red', [5, 20]);
drawBaseline(ctx, 0, lineTop, canvas.width, 1, 'black');

<canvas id="canvas"></canvas>