Html 使用 CSS 时画布被拉伸，但使用“宽度”/“高度”属性正常

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

提问by Sirber

I have 2 canvases, one uses HTML attributes widthand heightto size it, the other uses CSS:

我有 2 个画布，一个使用 HTML 属性width并调整height其大小，另一个使用 CSS：

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 displays like it should, but not compteur2. The content is drawn using JavaScript on a 300x300 canvas.

Compteur1 像它应该的那样显示，但不是 compteur2。内容是使用 JavaScript 在 300x300 画布上绘制的。

Why is there a display difference?

为什么会有显示差异？

回答by SamB

It seems that the widthand heightattributes determine the width or height of the canvas's coordinate system, whereas the CSS properties just determine the size of the box in which it will be shown.

似乎width和height属性决定了画布坐标系的宽度或高度，而 CSS 属性只决定了将在其中显示的框的大小。

This is explained at http://www.whatwg.org/html#attr-canvas-width(needs JS) or http://www.whatwg.org/c#attr-canvas-width(will probably eat your computer):

这在http://www.whatwg.org/html#attr-canvas-width（需要 JS）或http://www.whatwg.org/c#attr-canvas-width（可能会吃掉你的电脑）中有解释：

The canvaselement has two attributes to control the size of the element's bitmap: widthand height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integersmust be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The widthattribute defaults to 300, and the heightattribute defaults to 150.

该canvas元素有两个属性来控制元素位图的大小：width和height。这些属性在指定时必须具有有效的非负整数值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者解析其值返回错误，则必须改用默认值。的width属性默认为300，以及height属性默认为150。

回答by fermar

To set the widthand heightyou need, you may use

要设置width和height您需要的，您可以使用

canvasObject.setAttribute('width', '475');

回答by Ben Hymanson

For <canvas>elements, the CSS rules for widthand heightset the actual size of the canvas element that will be drawn to the page. On the other hand, the HTML attributes of widthand heightset the size of the coordinate system or 'grid' that the canvas API will use.

对于<canvas>元素的CSS规则width和height设置将被吸引到页面中的canvas元素的实际尺寸。另一方面，画布 API 将使用的坐标系或“网格”的 HTML 属性width和height设置大小。

For example, consider this (jsfiddle):

例如，考虑这个（jsfiddle）：

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

Both have had the same thing drawn on them relative to the internal coordinates of the canvas element. But in the second canvas, the red rectangle will be twice as wide because the canvas as a whole is being stretched across a bigger area by the CSS rules.

两者都相对于画布元素的内部坐标绘制了相同的东西。但是在第二个画布中，红色矩形将是两倍宽，因为整个画布被 CSS 规则拉伸到更大的区域。

Note: If the CSS rules for widthand/or heightaren't specified then the browser will use the HTML attributes to size the element such that 1 unit of these values equals 1px on the page. If these attributes aren't specified then they will default to a widthof 300and a heightof 150.

注意：如果没有指定width和/或的 CSS 规则，height那么浏览器将使用 HTML 属性来调整元素的大小，使这些值的 1 个单位等于页面上的 1px。如果未指定这些属性，则它们将默认为 a widthof300和 a heightof 150。

回答by Arindam Mojumder

The canvas will be stretched if you set the width and height in your CSS. If you want to dynamically manipulate the dimension of the canvas you have to use JavaScript like so:

如果您在 CSS 中设置宽度和高度，画布将被拉伸。如果你想动态操作画布的尺寸，你必须像这样使用 JavaScript：

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

回答by Russell Harkins

The browser uses the css width and height, but the canvas element scales based on the canvas width and height. In javascript, read the css width and height and set the canvas width and height to that.

浏览器使用 css 宽度和高度，但 canvas 元素根据画布宽度和高度进行缩放。在 javascript 中，读取 css 宽度和高度并将画布宽度和高度设置为该宽度和高度。

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

回答by XaviGuardia

Shannimalcorrection

山尼玛校正

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

回答by Anthony Gedeon

CSS sets the width and height of the canvas element so it affects the coordinate space leaving everything drawn skewed

CSS 设置画布元素的宽度和高度，因此它会影响坐标空间，使绘制的所有内容都倾斜

Here's my way on how to set the width and height with Vanilla JavaScript

这是我如何使用 Vanilla JavaScript 设置宽度和高度的方法

canvas.width = numberForWidth

canvas.height = numberForHeight

回答by Manolo

If you want a dynamic behaviour based on, e.g. CSS media queries, don't use canvas width and height attributes. Use CSS rules and then, before getting the canvas rendering context, assign to width and height attributes the CSS width and height styles:

如果您想要基于例如 CSS 媒体查询的动态行为，请不要使用画布宽度和高度属性。使用 CSS 规则，然后在获取画布渲染上下文之前，将 CSS 宽度和高度样式分配给宽度和高度属性：

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...