画布大小和分辨率

画布的大小是它在页面上占据的区域，由 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>