Question

我正在尝试使用HTML5画布。到目前为止，绘图操作似乎还不错。但是，我似乎无法弄清楚如何移动＆＃34;画布本身就在右边。看起来当前画布顶部默认为（0,0）。我怎样才能找到位于（200,0）的画布。例如，我可能想在左窗格中显示绘图按钮/工具（很像Windows绘图），并在右侧显示绘图。

我对前端开发的世界还很新，所以感谢帮助。我的感觉是，这应该在styles.css中指定 - 但不知道该放在那里。 THX。

<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>Canvas test</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>

<section id="main">
    <canvas id="canvas" width="1600" height="900">
        Requires modern browser.
    </canvas>
</section>

<!-- START JAVASCRIPT -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/drawtest.js"></script>
    <script>
        $(document).ready(function() {
            DrawGrid.initialize();
        });
    </script>

<!-- END JAVASCRIPT -->

</body>
</html>

Answer 1

与任何HTML元素一样，元素可以根据其CSS样式进行调整大小和位置。因此，如果您正在讨论画布在页面上的位置，请参阅常规CSS定位。 http://www.barelyfitz.com/screencast/html-training/css/positioning/

如果您正在讨论在画布内部移动“视图”以在不同位置应用绘图操作，请使用context.translate(-200,0);。 http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/

HTML5画布的位置和颜色

1 个答案: