调整和缩放画布元素

Question

我正在研究html5画布。在链接的小提琴中，我试图在其上绘制一个画布和一个圆圈，我希望它可以扩展。

This fiddle无法正常工作。另一方面，that one有效。

不同之处在于canvas元素的width和height属性。在第一个中，我将它们放在样式标记中，在后者中我将它们放在canvas元素中。 第一个：

canvas#myCanvas {

              border: 1px solid;
          }

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

第二个：

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

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

Answer 1

之前已经问过这个问题。我找了一个简单的＆amp;从以前的帖子中可以很容易理解答案，但它们似乎都让人感到困惑。

这是一个技术性较低的答案，希望更容易理解......

Canvas的默认大小为300x150px。当您使用CSS调整画布大小时，浏览器将“拉伸或挤压”＃34;现有像素以适合您的新尺寸尺寸。因此，当您使用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

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

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

// now redraw the previous content back to the canvas

Answer 2

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

在这里查看答案：

Canvas width and height in HTML5

在这里：

Canvas is stretched when using CSS but normal with "width" / "height" properties