使用 CSS 时画布会被拉伸，但使用“width”和“width”则正常。 “高度”属性

Question

我有 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 按其应有的方式显示，但 compteur2 不显示。内容是使用 JavaScript 在 300x300 画布上绘制的。

为什么会有显示差异？

Answer 1

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

HTML 规范对此进行了解释：

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

Answer 2

要在画布上设置宽度和高度，您可以使用：

canvasObject.setAttribute('width', '150');
canvasObject.setAttribute('height', '300');

Answer 3

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

例如，考虑这个（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>

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

注意：如果未指定 width 和/或 height 的 CSS 规则，则浏览器将使用 HTML 属性来调整元素的大小，以使这些值的 1 个单位等于页面上 1 像素。如果未指定这些属性，则它们的宽度将默认为300，高度为150。

Answer 4

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

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

Answer 5

Shannimal校正

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

Answer 6

Canvas 通过缓冲区渲染图像，因此当您指定宽度和高度 HTML 属性时，缓冲区的大小和长度会发生变化，但当您使用 CSS 时，缓冲区的大小不会改变。使图像拉伸。

使用 HTML 调整大小。

画布尺寸已更改 ->缓冲区大小已更改 -> 渲染

使用 CSS 调整大小

画布的大小已更改 -> 由于缓冲区长度保持不变，所以

当上下文渲染图像时，
图像显示在调整大小的画布中（但在未更改的缓冲区中渲染）。

Answer 7

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

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

canvas.width = numberForWidth

canvas.height = numberForHeight

Answer 8

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

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

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

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

Answer 9

我相信 CSS 有更好的机制来指定画布的大小，并且 CSS 必须决定样式，而不是 JavaScript 或 HTML。话虽如此，在 HTML 中设置宽度和高度对于解决画布问题非常重要。

CSS 有 !important 规则，允许覆盖其他样式属性的规则，包括 HTML 中的规则。通常，它的使用是不受欢迎的，但这里的使用是合法的黑客。

在 WebAssembly 的 Rust 模块中，您可以执行以下操作：

fn update_buffer(canvas: &HtmlCanvasElement) {
    canvas.set_width(canvas.client_width() as u32);
    canvas.set_height(canvas.client_height() as u32);
}

//.. 
#[wasm_bindgen(start)]
pub fn start() -> Result<(), JsValue> {
    // ...
    let canvas: Rc<_> = document
        .query_selector("canvas")
        .unwrap()
        .unwrap()
        .dyn_into::<HtmlCanvasElement>()
        .unwrap()
        .into();
    update_buffer(&canvas);
    // ...

    // create resizing handler for window
    {
        let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| {
            let canvas = canvas.clone();
            // ...

            update_buffer(&canvas);
            // ...
        window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?;
        on_resize.forget();
    }
}

一旦加载 WASM 模块，然后每当调整窗口大小时，我们都会更新画布缓冲区。我们通过手动将画布的 width 和 height 指定为 clientWidth 和 clientHeight。也许有更好的方法来更新缓冲区，但我相信这个解决方案比 @SamB、@CoderNaveed、@Anthony Gedeon、@Bluerain、@Ben Jackson、@Manolo、@XaviGuardia、@Russel Harkins 和 @fermar 建议的解决方案更好因为

1. 该元素是由 CSS 设计的，而不是 HTML。
2. 与 elem.style.width & 不同@Manolo 使用的 elem.style.height 技巧或 @XaviGuardia 使用的 JQuery 等效项，它将适用于尺寸由使用情况指定为 flex< 的 canvas 。 /code> 或 grid 项目。
3. 与@Russel Harkings 的解决方案不同，这还可以处理调整大小。虽然我喜欢他的回答，因为它真的很干净、简单。
4. WASM 是未来！哈哈：D.P.S

.有大量的 .unwrap() 因为 Rust 显式地处理可能的失败。

使用更好的库可以使PPS

    {
        let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| {
            let canvas = canvas.clone();
            // ...

            update_buffer(&canvas);
            // ...
        window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?;
        on_resize.forget();
    }

变得更加干净。例如

add_resize_handler(&window, move |e: ResizeEvent| {
  let canvas = canvas.clone();
  // ...

  update_buffer(&canvas);
})