深入理解Canvas模糊问题产生的原因与解决办法

我们在使用Canvas进行绘图时，经常会出现绘制的文字或者图片比较模糊，下面让我们看一下其产生的原因以及如何解决这个问题。

一、模糊产生的原因

1、style 和 canvas 中定义的宽高不一致造成的

通常，在定义 canvas 时我们会这么写：

<canvas width="300" height="150" style="width: 300px; height: 150px;" id="canvas"></canvas>

其中，width、height 为 canvas 中绘制的大小，canvas 可以看成是一个画布，而 width、height 则分别代表这个画布所绘制区域的宽高。而 style 中定义的 width、height 则代表实际渲染到页面上的宽高。

那么问题来了，当 width、height 和 style 中定义的 width、height 不一致时，canvas 中绘制的元素会根据 width、height 进行缩放或者拉伸到 style 中所定义的 width、height，这就会导致所绘制的图像比较模糊。

2、所绘制的像素不足 1px

在屏幕上绘制图像时，最少支持的也是绘制 1px，那么比如我们绘制 0.5px，canvas 会将使用填充算法将其扩展到 1px，如果所扩展的颜色跟原来的颜色一致，那么肯定没有问题，但是会产生锯齿状的一个效果，所以 canvas 会采取周围的颜色取一个平均值，这就会导致模糊的产生。所以尽量不要设置半个像素。

3、受到高清屏幕的影响

在我们的普通屏幕上，设备像素比（Device Pixel Ratio：屏幕的物理像素 / css像素）为 1:1，在这种情况下不会产生模糊的问题。但是如果我们在一个 4k 的屏幕上，设备像素比为 1.5，那么也就是说屏幕的物理像素 / css像素等于 1.5，即一个 css 像素会渲染到 1.5 个设备像素上，这就会导致 css 像素会进行扩展，从而产生模糊的问题。

既然知道产生的原因，那么解决起来就很简单了。其主要的思想就是对 canvas 的 width、height 进行扩展，也就是扩展 canvas 画布的大小，但是 style 中的 width、height 并没有改变，这样 canvas 会进行缩放，这样一来，点就变多了，但是 canvas 本身的大小并没有改变（同二倍图、多倍图的原理相似）。

二、解决方法

具体来说，有两种解决方法：

方法一

扩展 canvas 并对 canvas 的绘制上下文也进行扩展，相当于同时扩展画布和画笔。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio;

const { width, height } = canvas;

canvas.width = Math.round(width * dpr);
canvas.height = Math.round(height * dpr);

ctx.font = "bold 40px 宋体";
ctx.scale(dpr, dpr);

ctx.fillText("你好呀", canvas.clientWidth / 2, canvas.clientHeight / 2);

方法二

扩展 canvas，不扩展 canvas 绘制上下文，但在每次绘制元素时，需要对所绘制的元素进行扩展（即乘以一个设备像素比）。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio;

const { width, height } = canvas;

canvas.width = Math.round(width * dpr);
canvas.height = Math.round(height * dpr);

// ctx.scale(dpr, dpr);
ctx.font = "bold 40px 宋体";

ctx.fillText("你好呀", (canvas.clientWidth / 2) * dpr, (canvas.clientHeight / 2)  * dpr);

三、知识补充

除了上文的方法，小编还为大家整理了其他Canvas模糊问题产生的解决方法，希望对大家有所帮助

方法

第一步：获取像素比

第二步：将 canvas 标签上的宽高属性设置为 显示大小 * 像素比

第三步：将 canvas 样式宽高设置为 显示大小

第四步：使用 scale 方法设置比值

第五步：绘制 canvas 图形

function createHDCanvas (canvas, w, h) {
  const ratio = window.devicePixelRatio || 1;
  canvas.width = w * ratio; // 实际渲染像素
  canvas.height = h * ratio; // 实际渲染像素
  canvas.style.width = `${w}px`; // 控制显示大小
  canvas.style.height = `${h}px`; // 控制显示大小
  const ctx = canvas.getContext('2d')
  ctx.scale(ratio, ratio)
  // canvas 绘制
  return canvas;
}

到此这篇关于深入理解Canvas模糊问题产生的原因与解决办法的文章就介绍到这了,更多相关Canvas模糊问题内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

最新评论