Почему не переводить работы для холста в div?

Question

У меня есть 2 холста в div. Я пытался перевести один из холста, но это не сработало.

http://jsfiddle.net/VkbV5/ показывает случай, когда я закомментировал строку перевода:

this.innerElement2Ctx.translate(100,100);

Но когда я включил строку, маленький квадрат исчез. Зачем? Если вы запустите эту страницу в браузере и осмотрите innerElement2, вы увидите, что она вообще не двигалась, но маленький квадрат исчез.

Для вашей информации мне нужно 2 canvas, потому что я планирую прикрепить событие mouse к innerElement2.

Answer 1

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

Вот пример, который я сделал, чтобы настроить преобразование холста так, чтобы рисование тех же команд позволяло пользователю масштабировать и перемещаться по чертежу холста:1003 * http://phrogz.net/tmp/canvas_zoom_to_cursor.html

Если вы хотите переместить размещение холста на своей HTML-странице, используйте простое размещение CSS, как и для любого другого элемента, например <div>.

Если вам нужны сложные 2D или 3D преобразования, вы можете использовать для этого передовые функции CSS (как это поддерживается современными браузерами).Например, см .:
https://developer.mozilla.org/en/CSS/transform#CSS_transform_functions