直接缩放画布 VS 在 HiDPI 中缩放 CSS答案

【问题标题】：scaling canvas directly VS scaling the CSS in HiDPI直接缩放画布 VS 在 HiDPI 中缩放 CSS
【发布时间】：2014-03-07 14:36:49
【问题描述】：

对不起，我是初学者，有时我发现有人说我必须只缩放 CSS，而其他示例我发现他们直接将大小乘以新的比例，换句话说 canvas.width VS @987654322 @

有什么区别？

最新的 Chrome 是否像 Safari（现在是 2014 年 3 月）一样？

【问题讨论】：

【解决方案1】：

Canvas 由两部分组成：element canvas，即您在屏幕上看到的内容。然后在场景的“背后”有你绘制的图像位图。

设置element.style 只会影响元素本身，而不影响幕后（内部）位图。该位图被简单地拉伸以适应元素大小（如图像）。如果未指定大小，则默认为 300 x 150 像素。

width 和 height 属性（或标签的属性）是设置内部位图大小的属性。

没有 CSS 的元素通常会采用内部位图的大小（这里也涉及像素纵横比，但通常是 1:1）。

但是，您可以通过设置元素的 CSS 大小来覆盖它。同样，它不会影响内部位图，只是将其拉伸以适合元素。

所有浏览器的行为都应该相同。

【讨论】：

哦，谢谢！所以 CSS 仅针对 Retina 显示进行缩放？所以没有更多的内存被使用？
@Abdelouahab 它通常用于视网膜显示，但也用于打印场景。是的，将使用更多内存（但屏幕分辨率也更高）。
所以建议总是使用 CSS 而不是将真实画布加倍？
@Abdelouahab 如果比例为例如 2:1，则需要将画布加倍（宽度和高度，但不是 style.width/height），然后使用 CSS 强制减小元素大小。但仅限于那些情况。如果您知道您的页面将在视网膜显示器上查看，您可能希望使用window.devicePixelRatio 属性来查找或至少根据比例设置画布宽度/高度，并根据屏幕尺寸设置 CSS。这是一种方法：stackoverflow.com/questions/17359915/…