我创建了一些函数来绘制 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');
如何重置上下文以绘制新对象?
最佳答案
慢但懒的方法是调用 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>
关于javascript - 如何重置 Canvas 路径样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41513197/