画布大小和分辨率

画布的大小是它在页面上占据的区域,由 CSS 宽度和高度属性定义。

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

画布分辨率定义它包含的像素数。通过设置画布元素的宽度和高度属性来设置分辨率。如果未指定,画布默认为 300 x 150 像素。

以下画布将使用上面的 CSS 大小,但由于未指定 widthheight,因此分辨率将为 300 x 150。

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

这将导致每个像素被不均匀地拉伸。像素方面是 1:2。当画布拉伸时,浏览器将使用双线性过滤。这具有模糊拉伸像素的效果。

为了在使用画布时获得最佳效果,请确保画布分辨率与显示大小相匹配。

继上面的 CSS 样式以匹配显示大小后,将画布与 widthheight 设置为与样式定义的像素数相同。

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