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

Posted 2023-03-06

【中文标题】适用于不同设备的响应式画布

【英文标题】：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>

【参考方案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;

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