当使用CSS时画布被拉伸，但是“宽度” /“高度”属性 [英] Canvas is stretched when using CSS but normal with "width" / "height" properties

问题描述

我有2个画布，其中一个使用HTML属性 width 和 height

I have 2 canvases, one uses HTML attributes width and height to size it, the other uses 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显示类似，但不是compteur2。

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

为什么会出现显示差异？

Why is there a display difference?

推荐答案

似乎 width 和 height 属性决定了画布的坐标系统的宽度或高度，而CSS属性只是决定

It seems that the width and height attributes 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.

这将在 http://www.whatwg.org/html#attr-canvas-width （需要JS）或 http://www.whatwg.org/c#attr-canvas-width （可能会使用您的计算机）：

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):

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

The canvas element has two attributes to control the size of the element's bitmap: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must 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 width attribute defaults to 300, and the height attribute defaults to 150.

这篇关于当使用CSS时画布被拉伸，但是“宽度” /“高度”属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！