Google chrome 直接缩放画布与在HiDPI中缩放CSS

对不起，我是一个初学者，有时我发现有人说我必须只缩放CSS，而其他例子我发现他们直接用新的缩放倍增大小，换句话说

canvas.width

VS

canvas.style.width

有什么区别

---

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

画布由两部分组成：元素画布，即您在屏幕上看到的内容。然后在“幕后”有一个图像位图，你可以在上面画

设置

element.style

只会影响元素本身，而不会影响幕后（内部）位图。此位图只是拉伸以适合元素大小（如图像）。如果未指定大小，则默认为300 x 150像素

width

和

height

属性（或标记的属性）是设置内部位图大小的属性

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

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

---

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

哦，谢谢！例如，CSS仅用于视网膜显示？所以不再使用内存？@Abdelouahab它通常用于视网膜显示，但也用于打印场景。是的，将使用更多内存（但屏幕分辨率也更高）。因此建议始终使用CSS，而不是将真实画布加倍？@Abdelouahab如果比例为2:1，则需要将画布加倍（宽度和高度，但不是样式。宽度/高度），然后使用CSS强制降低元素大小。但只有在这些情况下。如果您知道您的页面将在视网膜显示器上查看，则可能需要使用

window.devicePixelRatio

属性查找或至少根据比率设置画布宽度/高度，并根据屏幕大小设置CSS。这里有一个方法：