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

问题描述

我有 2 个画布，一个使用 HTML 属性 width 和 height 来调整大小，另一个使用 CSS:

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.内容是使用 JavaScript 在 300x300 画布上绘制的.

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

为什么会有显示差异?

推荐答案

看来 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.

这在 HTML 规范中有解释:

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屋！