畫布大小和解析度

畫布的大小是它在頁面上佔據的區域，由 CSS 寬度和高度屬性定義。

canvas {
   width : 1000px;
   height : 1000px;
}

畫布解析度定義它包含的畫素數。通過設定畫布元素的寬度和高度屬性來設定解析度。如果未指定，畫布預設為 300 x 150 畫素。

以下畫布將使用上面的 CSS 大小，但由於未指定 width 和 height，因此解析度將為 300 x 150。

<canvas id="my-canvas"></canvas>

這將導致每個畫素被不均勻地拉伸。畫素方面是 1：2。當畫布拉伸時，瀏覽器將使用雙線性過濾。這具有模糊拉伸畫素的效果。

為了在使用畫布時獲得最佳效果，請確保畫布解析度與顯示大小相匹配。

繼上面的 CSS 樣式以匹配顯示大小後，將畫布與 width 和 height 設定為與樣式定義的畫素數相同。

<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>