适用于不同设备的响应式画布

【问题标题】：Responsive canvas for different devices适用于不同设备的响应式画布
【发布时间】：2016-06-02 23:42:16
【问题描述】：

我想将画布宽度设置为 div 宽度。画布容器将根据浏览器宽度调整大小。

<div class="canvas-container" width=100% align="center">
    <canvas id="Canvas"></canvas>   
</div>

【问题讨论】：

标签： javascript canvas responsive-design size width

【解决方案1】：

在每个调整大小事件上使用window.resize 事件和re-draw 画布元素（在处理程序中）

试试这个：

(function() {
  var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context.fillRect(10, 10, canvas.width - 20, canvas.height - 20);
  }
  resizeCanvas();
})();

* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
canvas {
  display: block;
  background: #eee;
}

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

【讨论】：