让 Canvas 宽度高度与父容器保持一致的技巧

#parent {
  width: 500px;
  height: 300px;
}

#myCanvas {
  width: 100%;
  height: 100%;
}

var canvas = document.getElementById('myCanvas');
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

解释说明：

• 父盒子的宽高可以根据实际需求进行设置。
• Canvas 的宽高设置为 100% 可以使其与父盒子保持一致。
• 使用 JavaScript 代码使 Canvas 的实际宽高与 CSS 样式中设置的宽高保持一致。