调整和缩放画布元素 [英] Sizing and scaling canvas element

问题描述

我在学习html5画布。在连接的fiddles中，我试图获得一个画布和一个绘制在其上的圆形，我想要扩展它。

I am studying html5 canvas. In the fiddles linked I am trying to get a canvas and a circle drawn on it, which I want to be scalable.

这个小提琴不工作，我期望它做。另一方面，那一个工作。

This fiddle does not work as I expect it to do. On the other hand that one works.

差异在于canvas元素的width和height属性。在第一个我把它们放在一个样式标签，在后一个我内联他们在canvas元素。
第一个：

The difference is in the width and height properties of the canvas element. In first one I put them in a style tag, in the latter one I inline them in the canvas element. first one:

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>

推荐答案

我找了一个简单的&

This question has been asked before. I looked for a simple & easy to understand answer from previous posts, but they all seemed confusingly technical.

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

Here's a less technical answer that's hopefully easier to understand...

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

Canvas has a default size of 300x150px. When you resize canvas with CSS the browser will "stretch or squish" the existing pixels to fit into your new size dimensions. So when you resize with CSS from 300x150 to 200x200 your existing canvas will appear distorted:

• Content will appear horizontally squished because 300 pixels of original content width is being squished into the new 200 pixel width.

由于原始内容高度的150像素被拉伸到新的200像素高度。

Content will appear vertically stretched because 150 pixels of original content height is being stretched into the new 200 pixel height.

如果你想用CSS调整大小，为了避免这种失真，你必须调整宽度&高度与原始画布大小成比例。你可以通过改变宽度& height by the proportion proportion：

If you want to resize with CSS, to avoid this distortion you must resize both the width & height in proportion to the original canvas size. You can do this by changing the width & height by the same proportion:

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

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

Alternately, you can resize the canvas element itself. This resizing actually adds or subtracts pixels from the canvas surface. Therefore, there is no stretching or squishing. However, resizing the canvas element itself will also automatically erase the canvas contents. So after resizing the canvas element itself you must redraw the previous content back to the canvas:

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

// now redraw the previous content back to the canvas

这篇关于调整和缩放画布元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！