画布调整大小问题 [英] Canvas resizing problem

问题描述

大家好，



我正在开发一个项目，但我遇到了问题。我正在尝试使画布响应于浏览器调整大小时，但我有一个jQuery问题。



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

Hi Guys,

I'm currently developing a project but I have a problem. I'm trying to make the canvas responsive to when the browser is resized, yet I have a jQuery problem.

When I use the code below, the canvas draws what I included in the code behind but do not respond on resize.

<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>

然后，当我使用下面的代码时，画布会在调整浏览器大小时调整大小但是没有画任何东西。

And then, when I use the code below, the canvas resizes when the browser is resized, but does not draw anything.

<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>

基本上两者之间的区别是

Basically the difference between the two is the

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

当jQuery未放入该脚本引用时调整大小，当jQuery进入该引用时，它不会调整大小但是它会绘制。



我们非常感谢任何帮助！

提前谢谢。

It resizes when the jQuery is not put in that script reference and when the jQuery in in that reference, it does not resize but it draws.

Any help would be much appreciated!
Thank you in advance.

推荐答案

（文件） .ready（function（）{


//获取画布和上下文
var c =

(document).ready(function () { //Get the canvas & context var c =

（'＃myCanvas' ）;
var ct = c.get（0）.getContext（'2d'）;
var container =

('#myCanvas'); var ct = c.get(0).getContext('2d'); var container =

（c）.parent（）;

//浏览器调整大小时运行函数

(c).parent(); //Run function when browser resizes

这篇关于画布调整大小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！