将 CSS Resize 属性添加到 Canvas 元素答案

【问题标题】：Add CSS Resize Property to Canvas Element将 CSS Resize 属性添加到 Canvas 元素
【发布时间】：2019-02-21 13:29:15
【问题描述】：

CSS resize 属性可以应用到画布元素上吗？使用 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 元素显示了应用到它的 resize 属性，但不正确，因为它实际上不能调整大小。第二个元素表明，一个像素的差异，元素的可调整大小消失了。第三个元素表明，如果不对其进行绘制，它似乎也不会应用该属性。 div 元素显示了我最终希望 canvas 元素看起来像什么。在 Firefox 中，只有 div 可以调整大小。

问题是由于 canvas 元素如何处理 CSS 宽度和高度的唯一性吗？

【问题讨论】：

标签： html css canvas

【解决方案1】：

不，CSS resize 不适用于内联元素。 <canvas>，就像<img> 是一个内联元素一样。因此，您不能在画布上使用此属性。 _{See MDN Note}

请注意，您可以将画布包裹在可调整大小的块容器中，并使画布以 100% 显示，但请记住，这仅用于显示。这将拉伸画布图像的实际像素内容。

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>

【讨论】：