javascript - 适用于不同设备的响应式 Canvas

Question

我想将 Canvas 宽度设置为div宽度。 Canvas 容器的大小将根据浏览器宽度进行调整。

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

Answer 1

Use window.resize event and re-draw canvas elements on every resize event(In handler)

试试这个:

(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;
}

<canvas id="canvas"></canvas>