Question

我想创建一个涉及绘制线条的画布场景。从字面上看，给出从一个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();
}

Answer 1

只调用一次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
}

canvas canvas（）javascript

1 个答案: