javascript - 中的 jquery 可调整大小的 Canvas

Question

我使用 jquery ( http://jqueryui.com/resizable/ ) 的调整大小函数来调整 div 的大小。在这个 div 中，我有一个输入和一个 Canvas ，我希望当我调整 div 大小时， Canvas 会跟随，我该怎么做？

使用如下示例代码:

<script>
    $(function() {
        $( "#resizable" ).resizable();
    });
</script>
<div id="resizable">
     <input type="text" id=field />
     <canvas id="mycanvas" height="400px"></canvas>
</div>

感谢您的帮助。

Answer 1

将 canvas 元素的 height 和 width 设置为 100%:

div#resizable {
    height: 200px; /* Initial height. */
    width: 200px; /* Initial width. */
}

div#resizable canvas {
    height: 100%;
    width: 100%;
}