Question

我目前正在开发一个项目，但我遇到了问题。我试图让画布响应浏览器的大小调整，但我有一个jQuery问题。

当我使用下面的代码时，画布会绘制我在后面的代码中包含的内容，但不会响应调整大小。

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript">
    $(document).ready(function () {


        //Get the canvas & context 
        var c = $('#myCanvas');
        var ct = c.get(0).getContext('2d');
        var container = $(c).parent();

        //Run function when browser resizes
        $(window).resize(respondCanvas);

        function respondCanvas() {
            c.attr('width', $(container).width()); //max width
            //c.attr('height', $(container).height() ); //max height

            //Call a function to redraw other content (texts, images etc)
            $.ajax({
                type: "POST",
                url: "Test.aspx/ResizeCanvas",
                data: JSON.stringify({ width: $(container).width() }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    eval(data.d);
                },
                error: function (msg) {
                    alert(msg);
                }
            });
        }

        //Initial call 
        respondCanvas();

    }); 
    </script>

然后，当我使用下面的代码时，画布会在调整浏览器大小时调整大小，但不会绘制任何内容。

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">
    $(document).ready(function () {


        //Get the canvas & context 
        var c = $('#myCanvas');
        var ct = c.get(0).getContext('2d');
        var container = $(c).parent();

        //Run function when browser resizes
        $(window).resize(respondCanvas);

        function respondCanvas() {
            c.attr('width', $(container).width()); //max width
            //c.attr('height', $(container).height() ); //max height

            //Call a function to redraw other content (texts, images etc)
            $.ajax({
                type: "POST",
                url: "Test.aspx/ResizeCanvas",
                data: JSON.stringify({ width: $(container).width() }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    eval(data.d);
                },
                error: function (msg) {
                    alert(msg);
                }
            });
        }

        //Initial call 
        respondCanvas();

    }); 
    </script>

基本上两者之间的区别是

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

当jQuery没有放在那个脚本引用中时，它调整大小，当jQuery在该引用中时，它不会调整大小但是它会绘制。

任何帮助将不胜感激！提前谢谢。

调整画布大小无法正常工作

0 个答案: