javascript - 动态调整 Canvas 大小；保持图像的位置

Question

有没有办法创建与 <div> 尺寸相同的动态 Canvas ？它在。

我用 height: 100%, width: 100% 试过了在 Canvas 的CSS中。我的 Canvas 总是和 div 一样 bif BUT 它里面的内容可以缩放。

所以我想知道一种调整 Canvas 大小但保持图像准确位置的方法，例如即使我在移动设备上更改风景也是如此。

Answer 1

您想设置 Canvas 元素的宽度和高度属性，而不是仅拉伸(stretch) Canvas 的css 宽度和高度，默认为300x150 宽度/高度。您可以使用 JavaScript 动态调整 Canvas 元素的大小。

这是一个工作示例。

//get the elements
const canvas = document.getElementById("canvas");
const myDiv = document.getElementById("my-div");

//set the width and height attributes to the div width and height
function resize(){
  canvas.width = myDiv.clientWidth;
  canvas.height = myDiv.clientHeight;
}
//on page resize, call resize()
window.addEventListener("resize", resize, false);

//call resize() initially to set the canvas size correctly
resize();

//you can call resize() when your div changes size, dynamically resizing the canvas to the div

div {
  width: 50vw;
  height: 50vh;
  background-color: lightblue;
}
canvas {
  background-color: rgba(255,0,0,0.5);
}

<div id="my-div">
  <canvas id="canvas"></canvas>
</div>