javascript - 如何重设 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();
    }

但是，当我在drawBaseline之后调用drawDashedLine时，图形也变为虚线。

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

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

最佳答案

一种缓慢但懒惰的方法是在设置路径样式之前先调用ctx.save()，然后在完成后先调用ctx.restore()。

但这将保存您上下文的所有属性，并且可能会保存很多您没有涉及的属性（fillStyle，strokeStyle，转换矩阵，剪切区域，globalAlpha，gCO，dashOffset，lineCap，font，text- align ...：全部）。
此外，如果出于某种原因忘记在restore()之后调用save()，则保存的状态将累积在内存中，这很不好。

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.strokeStyle ="#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>

关于javascript - 如何重设 Canvas 路径样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41513197/