Question

我可以在不使用CSS的情况下更改Javascript中canvas元素的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>

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

Answer 2

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

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

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

2 个答案: