Html 调整画布元素的大小和比例

我正在学习html5画布。在链接的小提琴中，我试图得到一张画布和一个画在上面的圆圈，我希望它是可伸缩的

没有像我期望的那样工作。另一方面，它起作用

区别在于canvas元素的宽度和高度属性。在第一个示例中，我将它们放在一个样式标记中，在后一个示例中，我将它们内联到canvas元素中。 第一个：

canvas#myCanvas {

              border: 1px solid;
          }

        <canvas id="myCanvas" width="200px" height="200px"></canvas>

canvas#myCanvas{
边框：1px实心；
}

第二个：

canvas#myCanvas {
              width: 200px;
              height: 200px;
              border: 1px solid;
          }

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

canvas#myCanvas{
宽度：200px；
高度：200px；
边框：1px实心；
}

这不是一个新问题，已经回答了很多次

请参见此处的答案：

在这里：

---

这个问题以前有人问过。我从以前的帖子中寻找了一个简单易懂的答案，但它们似乎都是技术性的

这里有一个不太专业的答案，希望更容易理解

画布的默认大小为300x150px。使用CSS调整画布大小时，浏览器将“拉伸或挤压”现有像素以适应新的大小。因此，当您使用CSS从300x150调整到200x200时，现有画布将出现扭曲：

• 内容将水平压缩，因为原始内容宽度的300像素将被压缩为新的200像素宽度

• 内容将显示为垂直拉伸，因为原始内容高度的150像素将被拉伸到新的200像素高度

如果要使用CSS调整大小，为了避免这种失真，必须根据原始画布大小按比例调整宽度和高度。可以通过按相同比例更改宽度和高度来执行此操作：

// when using CSS resizing, do it proportionally to avoid distortion
height:200px;    // 150 * 4/3 = 200px
width:400px;     // 300 * 4/3 = 400px

或者，可以调整画布元素本身的大小。这种调整大小实际上是从画布表面添加或减去像素。因此，没有拉伸或挤压。但是，调整画布元素本身的大小也会自动擦除画布内容。因此，在调整画布元素本身的大小后，必须将以前的内容重新绘制回画布：

// resizing the canvas element will not cause distortion
canvas.width=200;
canvas.height=200;

// now redraw the previous content back to the canvas

---

这个问题以前有人问过。我从以前的帖子中寻找了一个简单易懂的答案，但它们似乎都是技术性的。我已经发布了一个答案，希望更容易理解。