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

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

为什么会这样

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

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

解决方案

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

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

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

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

参考

植入部分

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

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 知识, 代码段, canvas

已有 5 条评论

  1. It looks like you've misspelled the word "cloing" on your website. I thought you would like to know :). Silly mistakes can ruin your site's credibility. I've used a tool called SpellScan.com in the past to keep mistakes off of my website.

    -Robert

  2. In case you didn't realize, the word "cloing" on your site is spelled incorrectly. I had similar issues on my website which hurt my credibility until someone pointed it out and I discovered some of the services like SpellHelper.com or SpellingCheck.com which help with these type of issues.

  3. I think you misspelled the word "cloing" on your website. If you want to keep errors off of your site we've successfully used a tool like SpellPros.com in the past for our websites. A nice customer pointed out our mistakes so I'm just paying it forward :).

  4. Hi There,

    Just a heads-up that I believe the word "cloing" is spelled wrong on your website. I had a couple of errors on my site before I started using a service to monitor for them. There are a few sites that do this but we like SpellingReport.com and ErrorSearch.com.

    -Jesiica

  5. In case you didn't realize, the word "cloing" on your site is spelled incorrectly. I had similar issues on my website which hurt my credibility until someone pointed it out and I discovered some of the services like SpellHelper.com or SpellingCheck.com which help with these type of issues.

添加新评论