如何更改画布元素的位置？答案

【问题标题】：How do I change the location of a canvas element?如何更改画布元素的位置？
【发布时间】：2012-02-10 07:41:15
【问题描述】：

我可以在不使用 CSS 的情况下更改 Javascript 中画布元素的 x 和 y 位置吗？我似乎找不到任何人甚至在互联网上询问它。

编辑：可以在 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>

【问题讨论】：

或许可以描述您想要实现的目标以及原因。这样可以提供更好的答案质量。
我想在谷歌浏览器的窗口中设置canvas元素的位置(x, y)。有什么代码可以用来做这个吗？
你的意思是不使用 top 和 left css 属性？顺便说一句，你为什么不想使用 css？
因为我想知道是否可以单独用 Javascript 来完成。
是的，但它没有任何作用。 JavaScript 不适用于对齐 DOM 元素。这就是我们有 CSS 的原因。

标签： javascript css canvas

【解决方案1】：

<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>

【讨论】：

我在上面发布了实现这个的代码。它似乎不起作用。
画布的position属性值是多少？添加 canvas.style.position = 'absolute'?
我在上面声明画布。我没有使用 css。看看我上面贴的代码。
@MrDrProfessorTyler 您粘贴为问题中的代码的内容在位置周围没有引号，从而导致 JavaScript 非法。（查看错误控制台，您会看到语法错误。）
仅供参考，如果你想用一个变量设置它（就像我一样）你必须创建一个字符串 main.style.left = somevar+"px";

【解决方案2】：

CSS 用于管理属性，其中包括在页面上定位元素。如果您选择不在 CSS 文件或内联样式中定义 top 或 left 属性，您仍然可以在使用 Javascript 在 DOM 中加载画布后设置这些属性。但是，您对脚本所做的只是直接更改 CSS 已经管理的相同属性。

使用 JS 来更改属性以代替样式表或内联样式没有技术优势，除非您在页面已经使用默认样式加载内容后动态更改它。如果您正在寻找制作动画，请查看jQuery 以获得非常好的 DOM 动画跨浏览器解决方案。已经发布了一个关于使用 JS 设置位置的基本代码的答案，正如我所说，这是最好为 CSS 保留的角色。

【讨论】：

那么我该如何在 Javascript 中执行此操作？
看来是别人把我打到JS了，呵呵。