Блог

Я создаю несколько холстов и размещаю их в разных частях экрана. На каждом холсте есть либо рисунок (выполненный с использованием javascript), либо текст (выполненный с использованием html), который, вероятно, слишком мал, чтобы его можно было разглядеть. Я использую Shadowbox, чтобы пользователь мог щелкнуть по определенному холсту и увидеть расширенный вид.

Моя проблема заключается в создании холстов таким образом, чтобы их можно было увеличить с помощью Shadowbox. Поскольку эти полотна отрисовываются динамически (то, что отрисовывается, основано на пользовательском вводе), они не являются изображениями. Кажется, что лучший способ справиться с этим — создать временные изображения, которые отображаются в меньшем размере на холсте, а затем отображаются в полном размере в Shadowbox.

Является ли создание временных изображений холстов наилучшим подходом? Или есть лучший способ с использованием HTML5 и / или Shadowbox? Я мало что знаю о HTML5 / рисовании с помощью javascript / Shadowbox, поэтому был бы признателен за совет.

Если вы хотите нарисовать на холсте что-то меньшего размера, все, что вам нужно сделать, это использовать

context.scale(x, y)

Начальный масштаб равен 1,1. Установка масштаба на 0,5, 0,5 уменьшит все нарисованное.

Весь ваш код чертежа может остаться прежним, он просто будет казаться меньше.

Вы захотите прочитать обо всех преобразованиях контекста canvas и о том, как их использовать. Руководство по Mozilla довольно хорошее:

https://developer.mozilla.org/en/Canvas_tutorial/Transformations