直接縮放畫布VS縮放HiDPI中的CSS

Question

對不起，我是一名初學者，有時我發現有人說我只能縮放CSS，而其他例子我發現他們直接乘以新的縮放比例，換句話說canvas.width VS canvas.style.width

有什麼區別？

最新的Chrome瀏覽器的行爲是否像Safari（現在在2014年3月）？

Answer 1

畫布由兩部分組成：元素畫布，這是你在屏幕上看到的。然後，「幕後」有一個你正在繪製的圖像位圖。

設置element.style只會影響元素本身，但不會影響幕後（內部）位圖。這個位圖被簡單地拉伸以適應元素大小（如圖像）。如果未指定大小，則默認爲300 x 150像素。

width和height屬性（或標籤的屬性）是設置內部位圖大小的屬性。

沒有CSS的元素通常會採用內部位圖的大小（這裏涉及像素縱橫比，但通常關係爲1：1）。

但是，您可以通過設置元素的CSS大小來覆蓋此設置。同樣，它不會影響內部位圖，只是將其拉伸以適應元素。

所有瀏覽器應該表現相同。