Несколько вопросов о canvas?

Question

[Sergo Zar]

Я был несколько дней без инета и меня заинтересовал cnavas. Решил посмотреть в программе Zeal (брограмма-сборник документации чуть ли не обо всём) что там написано и я не понял несколько вещей:
0. Почему метод save используется до того как чтото нарисовать? Вот один из тех примеров:

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // draw a simple rectangle, but scale it.
  ctx.save(); // я вот тут не понимаю, зачем сохранять "ничего"(наверное правильнее говрить "пустой холст" но я в этом не уверен)?
  ctx.scale(10, 3);
  ctx.fillRect(1, 10, 10, 10);
  ctx.restore();// и зачем это "ничего" восстанавливать?

  // mirror horizontally
  ctx.scale(-1, 1);
  ctx.font = '48px serif';
  ctx.fillText('MDN', -135, 120);
}

1. Почему нельзя объект, например четырехугольник или круг, сохранить в переменную чтобы легче было с ним обращатся? Например как в библиотеке sfml в С++

CircleShape circle(76,60);
circle.setOutlineThickness(2);
circle.setOutlineColor(gray);
circle.move(33,126);

Или может лучше использовать для этого какую-нибудь библиотеку? Если да, то какую лучше?

Answer 1

[WbICHA]

Почему метод scale используется до того как чтото нарисовать?

Чтобы это что-то рисовать с заданным скейлом?

ctx.save(); // я вот тут не понимаю, зачем сохранять "ничего"(наверное правильнее говрить "пустой холст" но я в этом не уверен)?

Потому что этот метод сохраняет текущие настройки холста (скейл, цвет заполнения/обводки, фонт и т.д.).

ctx.restore();// и зачем это "ничего" восстанавливать?

А после восстанавливает их.

Почему нельзя объект, например четырехугольник или круг, сохранить в переменную чтобы легче было с ним обращатся?

А каким образом ты хочешь сохранить в переменную закрашиваемые пиксели? Если хочешь менять, для этого нужно хранить информацию о том, где рисовать, каким цветом, с каким скейлом и т.д. и при каждом изменении всё перерисовывать.

Comments

[Sergo Zar]

в формулировке первого вопроса я сделал опечатку - исправил "..метод save используется.. "

"Потому что этот метод сохраняет текущие настройки холста (скейл, цвет заполнения/обводки, фонт и т.д.)." - но эти настройки сохраняются до того как чтото нарисовать. я не понимаю зачем это делать, ведь если сохранять чтото то то нужно сохранять чтото чтобы это чтото восстановить, а не ничего.
И ещё немного:
почему рисуется(ну или показывается.. хз как правильно объяснить) прямоугольник если после его рисования восстанавливается пустой холст? по идее же должно быть ничего не нарисовано

ctx.save(); // сохраняется ничего
  ctx.scale(10, 3);
  ctx.fillRect(1, 10, 10, 10);
  ctx.restore(); // восстанавливается ничего

"А каким образом ты хочешь сохранить в переменную закрашиваемые пиксели? Если хочешь менять, для этого нужно хранить информацию о том, где рисовать, каким цветом, с каким скейлом и т.д. и при каждом изменении всё перерисовывать." - понял- принял.

[WbICHA]

но эти настройки сохраняются до того как чтото нарисовать. я не понимаю зачем это делать, ведь если сохранять чтото то то нужно сохранять чтото чтобы это чтото восстановить, а не ничего.

Ты когда первый раз какую-нибудь программу открываешь и заходишь в настройки, там пусто? Нет? Тогда каким образом настройки канваса "пустые"? По-умолчанию ─ да.

почему рисуется(ну или показывается.. хз как правильно объяснить) прямоугольник если после его рисования восстанавливается пустой холст?

Да? В каком месте? Напомни, какой метод отвечает за очистку холста? Уж точно не ресет.

Ещё раз, демонстрирую на пальцах. Сейв ─ это экспорт текущих НАСТРОЕК холста, а рестор ─ это импорт последних экспортированных НАСТРОЕК холста.
Если всё ещё непонятно, идти в гугл узнавать значение слова НАСТРОЙКИ.

[Sergo Zar]

WbICHA, всё. Проснулся, понял)
Спасибо за терпение

Answer 2

[tundramani]

см Pixi.js

Comments

[Sergo Zar]

Спасибо, посмотрю