JS Canvas初始化后出现横竖滚动条，如何消除？

核心原因 #

滚动条出现是因为浏览器默认给body设置了边距，再加上Canvas默认是inline元素，会产生额外的空白空间，导致整体尺寸超出视窗。另外你每秒执行1000次尺寸重置，也可能引发布局抖动。

具体解决方案 #

• 清除浏览器默认样式
  在CSS中添加以下样式，消除body的默认边距，并禁止溢出滚动：

  body {
      margin: 0;
      padding: 0;
      overflow: hidden;
  }
  

• 修正Canvas的显示模式
  Canvas默认是inline元素，会有基线对齐的空白，设置为block元素可以避免这个问题：

  #board {
      display: block;
  }
  

• 优化JS逻辑
  取消高频的setInterval，改用更高效的requestAnimationFrame做渲染循环，并且只在窗口大小变化时更新Canvas尺寸，避免重复重置：

  var board;
  var context;
  
  window.onload = function(){
      board = document.getElementById("board");
      context = board.getContext("2d");
      
      resizeCanvas();
      window.addEventListener('resize', resizeCanvas);
      requestAnimationFrame(update);
  }
  
  function resizeCanvas() {
      board.width = window.innerWidth;
      board.height = window.innerHeight;
  }
  
  function update(){
      context.fillStyle = "black";
      context.fillRect(0, 0, board.width, board.height);
      requestAnimationFrame(update);
  }
  

内容的提问来源于stack exchange，提问作者Marco Gomez