Jquery ui 在jquery ui对话框中调整画布大小_Jquery Ui_Canvas

Jquery ui 在jquery ui对话框中调整画布大小

jquery-ui canvas

Jquery ui 在jquery ui对话框中调整画布大小,jquery-ui,canvas,Jquery Ui,Canvas,我有一个包含画布的jquery ui对话框，画布上绘制了一个棋盘，如下所示： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.

我有一个包含画布的jquery ui对话框，画布上绘制了一个棋盘，如下所示：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script>
<script>
$(function) {
    $("#chessboard").dialog({
        autoOpen: true,
        height: 500,
        width: 500,
        modal: false
    }

    function drawboard() {
        ctxt = document.getElementByID("chessboard").getContext("2d");

        // draw the board into the context
        ...
    }

    drawboard();
    </script>
    </head>
    <body>
    <canvas id="chessboard" width="400" height="400" />
    </body>
    </html>


$（功能）{
$（“#棋盘容器”）。对话框({
自动打开：对，
身高：500，
宽度：500，
模态：假
}
功能绘图板（）{
ctxt=document.getElementByID（“棋盘”）.getContext（“2d”）；
//把黑板画进上下文中
...
}
绞车（）；

现在，电路板仍呈现在画布上，但无法使用对话框调整其大小

是否可以将棋盘容器元素与canas一起调整大小？

看起来您希望绑定到“调整大小”事件，然后在该事件期间重新绘制棋盘

添加

resize: function(event, ui) { drawChessBoard() }

到您的初始化代码

resize: function(event, ui) { drawChessBoard() }