canvas绘制的图好模糊,怎么解决呢?

今天用canvas绘制了一个图表,但是绘制出来后特别模糊,感觉是拿了一张分辨率很差的图出来(忘记截图了),然后才发现,原来使用canvas还会出现这种问题

原因

在浏览器的window变量中有一个devicePixelRatio的属性,该属性决定了浏览器会用几个(通常是2个)像素点来渲染1个像素,举例来说,假设devicePixelRatio的值为2,一张100x100像素大小的图片,在retina屏幕下,会用2个像素点的宽度去渲染图片的1个像素点,因此该图片在retina屏幕上实际会占据200x200像素的空间,相当于图片被放大了一倍,因此图片会变得模糊。在window中有一个devicePixelRatio的属性,类似的,在canvas context中也存在一个webkitBackingStorePixelRatio的属性(仅safari和chrome),该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。

解决

我们只需要得到 devicePixelRatiowebkitBackingStorePixelRatio相除,得到一个比例,然后画图的时候,宽和高都乘以这个比例就好了。

举例

这是我刚开始画的一个Hello world
html代码如下:

<canvas id="canvas" width="300px" height="300px"></canvas>

js代码如下:

function draw() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.font = "20px serif";
    ctx.fillText("Hello world", 10, 50);
}
draw();

但是此时显示的字体有点模糊(该例子不是很明显):


那么解决后的代码如下:

function draw() {
    var getPixelRatio = function (context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
    };

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var ratio = getPixelRatio(ctx);

    ctx.font = "30px serif";
    ctx.fillText("Hello world", 10 * ratio, 50 * ratio);
}

draw();

此时的显示为:


demo代码地址:https://github.com/yangzhanmei/canvas-blurry-solve-demo

该例子不是很明显,大家可以在遇到很模糊的情况下使用该方法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • “模糊是多么 多么寂寞;模糊是多么 多么空虚;独自在清晰中,对比不断地扫过;我的寂寞,谁能明白我;模糊是多么 多么...
    smilewalker阅读 5,321评论 2 8
  • 注:[n]标识为遗留问题,在文章末尾遗留问题部分有详细解释说明。 之前做了一个在线给图片添加文本框的工具,大体思路...
    lzxxx阅读 17,231评论 4 9
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,841评论 25 708
  • 来对照下平时我们过着怎样的生活,每天打卡上下班,干着一成不变的工作。工资呢,拿个计算器稍微乘一下,就知道你这一辈子...
    在水一方含阅读 737评论 0 2
  • 童年的那些月夜,妈妈习惯给我朗读唐诗,她最先给我读的是李白的诗,当年那个幼小的我,不会懂得她的用心良苦。如今读过...
    幽幽草阅读 1,976评论 0 0