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

Question

抱歉，我是初学者，有时候我发现有人说我只需要缩放CSS，而其他例子我发现他们直接将这个尺寸乘以新尺度，换句话说canvas.width VS canvas.style.width

有什么区别？

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

Answer 1

Canvas由两部分组成：元素画布，这是您在屏幕上看到的。然后在场景的“后面”排列你绘制的图像位图。

设置element.style只会影响元素本身，但不会影响场景（内部）位图。只需拉伸此位图以适合元素大小（如图像）。如果未指定大小，则默认为300 x 150像素。

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

没有CSS的元素通常采用内部位图的大小（这里涉及像素长宽比，但通常关系是1：1）。

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

所有浏览器都应该表现相同。