如何根据用户输入调整Canvas容器？答案

【问题标题】：How to adjust canvas container based on user input?如何根据用户输入调整Canvas容器？
【发布时间】：2013-04-06 09:02:29
【问题描述】：

我有一个带有一些工具的画布，它位于一个 div 中。如何根据用户输入的画布宽度和高度自动调整 div？

<div id="container">
    <canvas id="theCanvas" width="<?php echo $_POST['inputwidth'] ?>" height="<?php echo $_POST['inputheight'] ?>"></canvas>
<div class="tools">
<span class="icon"> 
    <button id="brushTool"></button>
</span>
</div>
</div>

我试过设置 min-height 和 min-width 但没有成功。容器的边框跟随浏览器的大小。如果我将最大高度/宽度设置为 php + 一定的边距，是否有可能？多谢你们！ =)

#container{
    border-right: dotted black 5px;
    border-left: dotted black 5px;
    border-top: dotted black 5px;
    border-bottom: dotted black 5px;
    margin: auto;
}

#theCanvas {
    border: solid black 5px;
    border-radius: 10px;
    background: #ffffff;
    margin-left: 20%;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: crosshair;
}

【问题讨论】：

可以提供使用 Javascript 的答案，但您是否正在寻找仅使用 HTML 和 CSS 的答案？
到目前为止，我愿意尝试任何事情。所以，是的，Javascript 会很棒。 =) 谢谢。
嗨，jing3142。你能指导我使用 Javascript 吗？这对我来说意味着整个世界。谢谢！ =)

标签： html5-canvas

【解决方案1】：

抱歉这么久才回复，希望你已经找到答案了。

一旦您知道画布的宽度和高度（以像素为单位），您就可以使用

CVW=document.getElementById("theCanvas").width;
CVH=document.getElementById("theCanvas").height;

CNW=CVW/0.6 //(for a 20% left and right margin given to the canvas)
CNH=CVH+40  //(for a 20px top and bottom margin given to the canvas)
document.getElementById("container").style.width=CNW+"px";
document.getElementById("container").style.height=CNH+"px";

你需要把它放在一个函数中，并且只有在你知道画布的宽度和高度时才调用它。

请注意，容器的宽度和高度是使用 css 样式设置的，但不是为画布设置的。

下面是完整的简化版

<html>
    <head>
        <style>
            #container{
                border-right: dotted black 5px;
                border-left: dotted black 5px;
                border-top: dotted black 5px;
                border-bottom: dotted black 5px;
                margin: auto;
            }

            #theCanvas {
                border: solid black 5px;
                border-radius: 10px;
                background: #ffffff;
                margin-left: 20%;
                margin-top: 20px;
                margin-bottom: 20px;
                cursor: crosshair;
            }
        </style>
        <script>

            function set() {
                CVW=document.getElementById("theCanvas").width;
                CVH=document.getElementById("theCanvas").height;

                CNW=CVW/0.6; //(for a 20% left and right margin given to the canvas)
                CNH=CVH+40;  //(for a 20px top and bottom margin given to the canvas)
                document.getElementById("container").style.width=CNW+"px";
                document.getElementById("container").style.height=CNH+"px";
            }
        </script>
    </head>
    <body onload="set()">
        <div id="container">
            <canvas id="theCanvas" width=200 height="300"></canvas>
        </div>
    </body>
</html>

【讨论】：