Question

我试图将我的html5画布调整为与页面大小相同但由于某种原因，javascript不会改变其大小。这是我的代码片段：

＆＃13;

.fit-thumbnail { object-fit: cover; }

＆＃13;

let canvas = document.getElementById('canvas').getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

$(window).resize(function() {
  canvas.width = $(window).width();
  canvas.height = $(window).height();
});

＆＃13;

canvas {
  border: 1px dashed black;
}

＆＃13;

无论我做什么，画布仍然是500px，请帮忙。

Answer 1

试试这个：

＆＃13;

  $(document).ready(function(){
        var w = $(window).width();
        var h = $(window).height();
        $('#canvas').width(w);
        $('#canvas').height(h);
   });

   $(window).resize(function(){
        var w = $(window).width();
        var h = $(window).height();
        $('#canvas').width(w);
        $('#canvas').height(h);
   });

＆＃13;

#canvas {
  width: 500px;
  height: 500px;
  /* for testing */
  background: #CFF000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id='canvas'></canvas>

＆＃13;

HTML5 Canvas没有在Javascript中调整大小

1 个答案: