javascript - Canvas 恢复问题()JavaScript

我想创建一个包含绘图线的画布场景。从字面上看，是为了使实线从一个x / y坐标绘制到另一个x / y坐标。我的麻烦似乎与我使用save（）和restore（）有关。我的理解是，如果在开始绘制之前先保存（）画布，然后可以调用restore（）将画布重置为该初始状态。这样，我可以在不扭曲画布的情况下开始下一行。

运行下面的代码时，将按预期绘制第一行。然后，我调用restore（）以允许我在下一行使用未失真的画布。结果（看起来）第二条线按照指示绘制。我再次调用restore（）以允许我从一组指定的坐标绘制第三条线到另一组坐标。但是，这第三行不是从给定的坐标开始。好像画布仍与上一行扭曲，但我不明白为什么。谁能阐明我的困境？ （此外，对于网络而言，有一种更简单的方法来创建这种样式的线图，您能告诉我吗？）

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.save();

var a = 0;
function callVerticalTeal() {
    if(a < 200) { //draw line the length of 200px
        drawVerticalTeal();
        a++;
        setTimeout(callVerticalTeal, 0);
    }
setTimeout(callHorizontalRed, 1200);
}

function drawVerticalTeal(){
    c.transform(1,0,0,1,0,1);
    c.beginPath();
    c.moveTo(325, 200);
    c.strokeStyle = 'teal';
    c.lineCap = 'round';
    c.lineWidth = 10;
    c.lineTo(325, 200);
    c.stroke();

}
// Start the loop
setTimeout(callVerticalTeal, 0);

var b = 0;
function callHorizontalRed() {
    if(b < 200) {
        drawHorizontalRed();
        b++;
        setTimeout(callHorizontalRed, 1000);
    }
    c.restore();
    setTimeout(callHorizontalBlack, 1200);
}

function drawHorizontalRed(){
    c.restore();
    c.transform(1,0,0,1,1,0);
    c.beginPath();
    c.moveTo(325, 200);
    c.strokeStyle = 'brown';
    c.lineCap = 'round';
    c.lineWidth = 10;
    c.lineTo(325, 200);
    c.stroke();
}

var x = 0;

function callHorizontalBlack() {
    if(x < 200) {
        draw();
        x++;
        setTimeout(call, 5000);
    }
    setTimeout(callVerticalBlack, 1200);
}

function draw(){
    c.restore();
    c.transform(1,0,0,1,1,0);
    c.beginPath();
    c.moveTo(325, 400);
    c.strokeStyle = 'black';
    c.lineCap = 'round';
    c.lineWidth = 10;
    c.lineTo(325, 400);
    c.stroke();
}

最佳答案

您只调用一次context.save（）。通常，在任何绘制方法中首先调用context.save（），最后一次调用context.restore（）。因此，如果您要这样称呼它，它就是一个拦截器。

function paintSomething() {
    ctx.save();
    // now paint something
    ctx.restore(); // we now are clean again, because we have the previously saved state
}

关于javascript - Canvas 恢复问题()JavaScript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50889635/