Question

CSS resize属性可以应用于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元素显示应用于它的resize属性，但由于它实际上不可调整大小，因此不正确。第二个元素显示，在一个像素差异的情况下，元素的可调整性消失。第三个元素表明，如果没有绘制它，它似乎也不会应用该属性。 div元素显示了我最终想要的canvas元素。在Firefox中，只有div可以调整大小。

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

Answer 1

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

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

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>

将CSS Resize属性添加到Canvas元素

1 个答案: