世界知最

没有过时的技术,只有过时的人

canvas在手机高清屏下绘图不清晰的解决办法

原来的图片:
这里写图片描述
合成的图片:
这里写图片描述
原因分析

  假设dpr = 2;图片大小为60x60px。
  对dpr有一定的了解基础

  1.DOM呈现图片过程

  图片->浏览器css像素(显示尺寸)->屏幕实际像素

  60x60 -> 30x30 -> 60x60

  图片像素:实际像素

  1: 1

  2.canvas绘制过程

  图片像素->canvas像素(画布尺寸)->css像素(显示尺寸)->屏幕实际像素

  60x60 -> 30x30 -> 30x30 -> 60x60

  图片像素->画布像素->实际像素

  4: 1: 4
也就是说,canvas的绘制过程中图片到画布的过程中进行了像素的抽稀,画布到屏幕像素时又进行了插值,所以造成图片质量下降。

解决方案:
  放大画布的尺寸,但是canvas显示尺寸不变;
  图片像素->canvas像素(画布尺寸)->css像素(显示尺寸)->屏幕实际像素
60x60 -> 60x60 -> 30x30 -> 60x60
  图片像素:实际像素
  1: 1

而canvas的设计的时候正好有对象的属性来分别管理画布尺寸和显示尺寸;canvas的width、height属性用于管理画布尺寸;canvas的style属性中的width、height正好是显示尺寸。
简单的说,就是canvas的width属性大小和height属性大小要和画布的宽高和被用来合成图片的宽高;主要canvas的width属性大小和height属性大小不是css中的width和height。
这里写图片描述

阅读更多
版权声明:可以转发 https://blog.csdn.net/a419419/article/details/79297468
个人分类: canvas
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

canvas在手机高清屏下绘图不清晰的解决办法

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭