Как изменить местоположение элемента canvas? - PullRequest
3 голосов
/ 10 февраля 2012

Могу ли я изменить положение x и y элемента canvas в Javascript без использования CSS? Кажется, я не могу найти никого, кто бы даже спрашивал об этом в Интернете.

РЕДАКТИРОВАТЬ: это может быть сделано в HTML?

<html>
<title>Testing</title>
    <canvas id="main" width="200" height="200" style="border:1px solid     #c3c3c3;">
    Error: Browser does not support canvas element.
    </canvas>
    <script type="text/javascript">         
        var main = document.getElementById("main");
        var render = main.getContext("2d");
        main.width = 200;
        main.height = 200;
        main.style.left = 100x;
        main.style.top = 100px;
    </script>
</html>

Ответы [ 2 ]

9 голосов
/ 10 февраля 2012
<html>
<title>Testing</title>
    <canvas id="main" width="200" height="200" style="border:1px solid     #c3c3c3;">
    Error: Browser does not support canvas element.
    </canvas>
    <script type="text/javascript">

        var main = document.getElementById("main");
        var render = main.getContext("2d");
        main.width = 200;
        main.height = 200;
        main.style.left = "100px";
        main.style.top = "100px";
        main.style.position = "absolute";
    </script>
</html>
2 голосов
/ 10 февраля 2012

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

Нет никакого технического преимущества в использовании JS для изменения свойств вместо таблицы стилей или встроенного стиля, если только выдинамически меняем его после того, как на страницу уже загружен контент со стилями по умолчанию.Если вы хотите сделать анимацию, посмотрите jQuery , чтобы узнать действительно хорошее кросс-браузерное решение для анимации DOM.Уже опубликован ответ на основной код для определения позиции один раз с использованием JS, который, как я уже сказал, лучше всего зарезервировать для CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...