使 Canvas 画布支持高分屏(High DPI)

上一回我们说到用 Canvas 去渲染图像,但是在高分屏中,我们会发现,同样的大小,在高分屏上显示的并不清晰,这个 demo 表示的非常清楚:https://jsfiddle.net/csvwolf/3gvs44vw/

为什么会这样

实际上我们在屏幕中看到的都是逻辑像素,但对于设备中元素的实际像素,是逻辑像素 * 设备像素比
,也可以叫做物理像素。

实际上在 Canvas 绘制时,也需要绘制实际像素,再进行画布的缩放。

解决方案

在 demo 中已经有了方案,先绘制逻辑像素 * 设备像素比大小的画布,用 CSS 把样式大小调整,这样实际上是把 canvas 像素点压缩到指定尺寸,但是这样字会变小,我们还需要利用缩放放大设备像素比倍的尺寸,让尺寸恢复正常。

这样一个支持高分屏的渲染就做完了。

接下来我们考虑,如果我们支持完高分屏,图片像素的坐标要怎么选定:答案是要扩大像素比倍进行选择,因为画布的像素点总数没有变化。

很惭愧,一点微小的实践经验,时间有限,就说这么多。

参考

如果您觉得文章不错,可以通过赞助支持我

标签: 知识, 代码段, canvas

添加新评论