通过 CSS 与元素属性的 HTML5 Canvas 大小 [英] Size of HTML5 Canvas via CSS versus element attributes

问题描述

我不明白为什么下面几段代码会产生不同的结果，因为 css 会在放大时缩放画布，

I don't get why the following pieces of code produce different results, because css would scale the canvas as it was zoomed in,

<style>
#canvas {
    width: 800px;
    height: 600px;
}
</style>
<canvas id="canvas"></canvas>

与此方法相反(按预期工作):

In contrast with this approach (that works as expected):

<canvas id="canvas" width="800px" height="600px"></canvas>

推荐答案

解释在这里:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width 在另一篇文章中看到，谢谢！

The explanation is here: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width as seen in another post, thanks!

canvas 元素的内在尺寸等于坐标空间的大小，数字以 CSS 像素解释.但是，元素可以通过样式表任意调整大小.在渲染过程中，图像会缩放以适应此布局大小.

The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.

这篇关于通过 CSS 与元素属性的 HTML5 Canvas 大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！