html5-canvas 画布大小和分辨率
示例
画布的大小是它在页面上占据的区域,由CSSwidth和height属性定义。
canvas { width : 1000px; height : 1000px; }
画布分辨率定义了它包含的像素数。通过设置画布元素的width和height属性来设置分辨率。如果未指定,则画布默认为300x150像素。
下面画布将使用上述CSS大小,但作为width和height未指定的分辨率将300150。
<canvas id="my-canvas"></canvas>
这将导致每个像素不均匀地拉伸。像素长宽比为1:2。当画布被拉伸时,浏览器将使用双线性过滤。这具有使伸展的像素模糊的效果。
为了在使用画布时获得最佳效果,请确保画布分辨率与显示尺寸匹配。
从上面的CSS样式开始,以匹配显示尺寸,添加带有width和的画布,并将其height设置为与样式定义相同的像素数。
<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>