Понимание save() и restore() контекста Canvas

JavaScript
Понимание save() и restore() контекста Canvas

🙂 Краткое описание

Я написал один раньшеСовместное приложение для записи блокнота на основе холста, я писал это приложение с функциями "вперед" и "назад" рисования на чертежной доске.В то время я проверил документ Canvas на MDN и увидел, что есть два метода: save() и restore(). Документация объясняет это так使用 save() 方法保存默认的状态，使用 restore()进行恢复В то время интересно, возможно, можно достичь с помощью этих двух методов, но в последний раз это противоположно желаемому результату. В этой статье мы рассмотрим сохранение () и восстановление ();

🙂 Более каноническое объяснение restore() и save()

Методы save() и restore() будут действовать только в пределах допустимого диапазона Это память о состоянии рисования, а не память о содержимом холста. Он основан на государственных документах.
Контекст холста поддерживает стек состояния рисования. Различают состояния чертежа:

  • текущее преобразование матрицы例如：平移translate()，缩放scale()，以及旋转rotate()等
  • область отсеченияclip()
  • Следующие значения свойств:strokeStyle，fillStyle，globalAlpha，lineWidth，lineCap，lineJoin，miterLimit，shadowOffsetX，shadowOffsetY，shadowBlur，shadowColor，globalCompositeOperation，font，textAlign，textBaseline。
  • Пути и растровые изображения не являются частью состояния рисования, используйтеsave()和restore()не вступит в силу. Пути являются постоянными и могут быть сброшены только с помощью метода beginPath(), растровые изображения являются свойствами холста, а не контекста.
  • context.save()Поместите текущее состояние в стек.context.restore()Извлекает верхнее состояние стека, восстанавливая контекст до этого состояния.

🙂 Позвольте мне представить сцену

✈ Сцена "Трансформация"

Холст имеет только один 2d-контекст,save()和restore()Сценарии использования также широки, например, использование «переходных» состояний.
При выполнении операции «преобразования» изменится система координат всего контекста. После «преобразования» нам нужно восстановить систему координат в исходное нормальное состояние, в это время нам нужно использоватьsave()和restore(). Как показано ниже:

效果图

Мы видим, что призваниеrestore()Нарисованный граф не изменился, изменилось только состояние рисования. Потому что нарисованный граф не принадлежит состоянию рисования. а такжеrestore()和save()Применяется только к состоянию рисования. в моемСовместное приложение для записи блокнота на основе холстая хотел бы достичьотозватьа такжевосстанавливатьсяНарисованный контент не работает.По этой причине нарисованный контент не относится к нарисованному состоянию, поэтому нарисованный контент нельзя отменить или восстановить отмененный контент.

😃Кодовые слова не так хороши, как стек

С тем же успехом мы могли бы просто написать, как использоватьsave()和restore()код.

💻HTML-код

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Canvas Test</title>
    </head>
    <body
        <div>
            <canvas id="canvas" width="320" height="200">
                 This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </body>
</html>

javscript code

var canvas,ctx;
function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    draw();
}
function draw() {
    //初始的样式（绘制状态）并绘制矩形
    ctx.fillStyle = '#FA6900';
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(0,0,15,150);
    ctx.save(); //保存上述设置的绘制状态
    
    //重新定义新的绘制状态，并绘制矩形
    ctx.fillStyle = '#E0E4CD';
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(30,0,30,150);
    
    //绘制完之后，恢复到初始的绘制状态，继续进行绘画。并绘制圆形，并不会恢复初始状态下绘制的矩形。
    ctx.restore();
    ctx.beginPath();
    ctx.arc(305, 75, 8, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
    }
    init();

Эффект приведенного выше кода следующий:

效果图
Мы обнаружили, что цвет заливки и тень последнего нарисованного круга такие же, как у первого прямоугольника, потому что после восстановления используется начальное состояние рисования.

😭 позже

Вышеупомянутое для холстаsave()和restore()введение. Я также понял реальный эффект этого после прочтения блога, написанного иностранным автором. Если есть ошибка или лучшее понимание, пожалуйста, оставьте сообщение, чтобы указать и прокомментировать. закончить цветок★,°:.☆(￣▽￣)/$:.°★.

参考文献：Understanding save() and restore() for the Canvas Context (July 10, 2010 by James Litten)

Категории