html - 将 CSS Resize 属性添加到 Canvas 元素

Question

CSS 调整大小属性可以应用于 Canvas 元素吗？使用 MDN document作为引用，aribrary 元素示例似乎不适用于 Canvas 作为元素。

HTML

<canvas width=300 height=300></canvas>

CSS

canvas {
  resize: both;
  overflow: hidden;
  border: 1px solid black;
}

我创建了一个 jsfiddle 来处理我遇到的其他一些问题: https://jsfiddle.net/m540fevj/1/

在 Chrome 中，第一个 canvas 元素显示了应用到它的调整大小属性，但并不正确，因为它实际上不能调整大小。第二个元素显示了一个像素的差异，元素的可调整大小消失了。第三个元素表明，如果不对其进行绘制，它似乎也不会应用该属性。 div 元素显示了我最终希望 canvas 元素看起来像什么。在 Firefox 中，只有 div 是可调整大小的。

问题是由于 canvas 元素处理 CSS 宽度和高度的方式的独特性吗？

Answer 1

不，CSS resize 不适用于行内元素。 <canvas> , 就像 <img>是一个内联元素。因此，您不能在 Canvas 上使用此属性。 <子> See MDN Note

请注意，您可以将 Canvas 包裹在一个可调整大小的 block 容器中，并使 Canvas 以 100% 显示，但请记住这只是为了显示。这将拉伸(stretch) Canvas 图像的实际像素内容。

const ctx = canvas.getContext('2d');
ctx.arc(25,25,25,0,Math.PI*2);
ctx.fill();

.resize-me {
  display: inline-block;
  border: 1px solid;
  resize: both;
  width: 50px;
  height: 50px;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  pointer-events: none; /* Chrome needs this oO */
}

<div class="resize-me">
  <canvas id="canvas" width="50" height="50"></canvas>
</div>