Question

我有一个基于窗口大小通过Javascript创建的画布，代码如下：

var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    canvas = document.querySelector('#pixies'),
    context = canvas.getContext('2d'),
    gradient = null,
    pixies = new Array();

function setDimensions(e) {
    WIDTH = window.innerWidth - 40;
    // For some reason above code is extending width past the window by about 40px
    HEIGHT = window.innerHeight;
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
}
setDimensions();
window.addEventListener('resize', setDimensions);

<div>
    <div>
      <canvas id="pixies"></canvas>
    </div>
    <div class="container">
      <%= yield %>
    </div>
  </div>

问题：正在基于window.innerHeight创建画布（以像素为单位）。在100％页面查看时没有问题，但是在200％处出现水平滚动条并且画布向外向右延伸。如何将画布保持在窗口宽度内并防止水平滚动？

Answer 1

我的解决方案：将画布样式设置为最大宽度：100％

画布宽度在缩放时延伸到页面外部

1 个答案: