在页面加载时调整画布大小

Question

我正在使用以下代码段成功调整canvas元素的大小。我需要它来调整页面加载上的画布元素，而不需要用户交互来激活windowResize()函数。

(function($){
    $(window).resize(function(){
      windowResize();                      
    });         
})(jQuery);

function windowResize(){
   stage.canvas.width = window.innerWidth;
   stage.canvas.height = window.innerHeight;    
   var test = (window.innerHeight/500)*1;
   exportRoot.scaleX = exportRoot.scaleY = test;
}

Answer 1

只需在jQuery加载中调用windowResize。

$(function(){

    function windowResize(){
       stage.canvas.width = window.innerWidth;
       stage.canvas.height = window.innerHeight;    
       var test = (window.innerHeight/500)*1;
       exportRoot.scaleX = exportRoot.scaleY = test;
    }

    ....

    $(window).resize(function(){ windowResize(); }); 

    windowResize();


}); // end $(function(){});

Answer 2

只需将您的代码段修改为：

$(window).on('resize load', windowResize);

这将在加载和调整大小时调用windowResize()。