canvas绘制的图好模糊，怎么解决呢？

2024-06-12 03:58| 来源: 网络整理| 查看: 265

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

原因

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

解决

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

举例

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

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

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

【本文地址】

公司简介

联系我们