HTML5 Canvas 大小调整：CSS 或元素属性 – 您应该使用哪种方法？

评估 HTML5 Canvas 大小：CSS 与元素属性

在 HTML5 中，canvas 元素的大小可以通过 CSS 属性确定或元素属性。然而，这些方法会产生截然不同的结果，从而导致混乱。

结果差异

使用 CSS 定义画布大小时，画布会随着网络的变化而缩小或扩展页面被放大或缩小。另一方面，直接通过元素属性（例如宽度和高度）指定画布大小，无论缩放级别如何，都会产生一致的显示。

理解机制

要掌握差异，请考虑以下事项：

• CSS 属性 控制视觉效果画布在屏幕上的表示。当您在 CSS 中设置宽度和高度时，您定义的是画布显示的大小，但不是可用于绘制的实际像素数。
• 元素属性决定画布的内部大小canvas，定义可用于绘图的实际像素分辨率。默认情况下，未指定的画布的分辨率为宽度 300px，高度 150px。

实际含义

CSS 大小和元素属性大小的区别具有实际意义：

• 如果您需要在特定位置显示画布分辨率并保持该分辨率，无论缩放级别如何，请使用元素属性指定大小。
• 如果您打算在缩放期间缩放画布，同时保持宽高比，请使用 CSS 属性来设置大小。

可视化

要说明差异，请访问http://jsfiddle.net/9bheb/5/，您可以在其中观察 CSS 大小为 800px x 16px 且元素属性大小为 32px x 32px 的画布在缩放下的不同表现。

以上是HTML5 Canvas 大小调整：CSS 或元素属性 – 您应该使用哪种方法？的详细内容。更多信息请关注PHP中文网其他相关文章！